Web geli\u015ftirme d\u00fcnyas\u0131nda s\u00fcrekli yenilikler ve ara\u00e7lar ortaya \u00e7\u0131karken, geli\u015ftiricilerin en b\u00fcy\u00fck arzusu, hem h\u0131zl\u0131 hem de performansl\u0131 uygulamalar in\u015fa etmek. \u0130\u015fte tam da bu noktada, modern web aray\u00fczleri olu\u015fturmay\u0131 k\u00f6kten de\u011fi\u015ftirecek yeni bir oyuncu sahneye \u00e7\u0131kt\u0131: Floatkit. Bu makalede, Floatkit’in ne oldu\u011funu, neden bu kadar heyecan verici oldu\u011funu, temel \u00f6zelliklerini, kurulumunu ve ileri d\u00fczey kullan\u0131m senaryolar\u0131n\u0131 detayl\u0131 bir \u015fekilde inceleyece\u011fiz. Gelin, Floatkit’in web geli\u015ftirme ser\u00fcveninize nas\u0131l yeni bir soluk getirece\u011fini birlikte ke\u015ffedelim.<\/p>\n
G\u00fcn\u00fcm\u00fcz web uygulamalar\u0131, kullan\u0131c\u0131larla etkile\u015fimi en \u00fcst d\u00fczeye \u00e7\u0131karmak i\u00e7in dinamik ve ak\u0131c\u0131 aray\u00fczlere ihtiya\u00e7 duyar. Modallar, a\u00e7\u0131l\u0131r men\u00fcler (dropdowns), ara\u00e7 ipu\u00e7lar\u0131 (tooltips), bildirimler ve pop-up pencereler gibi “y\u00fczen” (floating) elemanlar, modern kullan\u0131c\u0131 deneyiminin (UX) ayr\u0131lmaz bir par\u00e7as\u0131 haline gelmi\u015ftir. Ancak bu t\u00fcr bile\u015fenleri s\u0131f\u0131rdan olu\u015fturmak, \u00f6zellikle eri\u015filebilirlik (accessibility), performans ve responsive tasar\u0131m (duyarl\u0131 tasar\u0131m) gibi fakt\u00f6rleri g\u00f6z \u00f6n\u00fcnde bulundurdu\u011funuzda, geli\u015ftiriciler i\u00e7in \u00f6nemli zorluklar te\u015fkil edebilir. \u0130\u015fte Floatkit tam da bu problemleri \u00e7\u00f6zmek \u00fczere tasarlanm\u0131\u015f, hafif ve mod\u00fcler bir kullan\u0131c\u0131 aray\u00fcz\u00fc (UI) \u00e7er\u00e7evesidir (framework).<\/p>\n
Floatkit, \u00f6zellikle bu “y\u00fczen” aray\u00fcz bile\u015fenlerini kolayca entegre etmek, y\u00f6netmek ve optimize etmek i\u00e7in geli\u015ftirilmi\u015f bir ara\u00e7 setidir. Geleneksel yakla\u015f\u0131mlar genellikle karma\u015f\u0131k JavaScript kodlar\u0131, CSS \u00e7ak\u0131\u015fmalar\u0131 ve farkl\u0131 taray\u0131c\u0131 uyumluluk sorunlar\u0131yla bo\u011fu\u015fmay\u0131 gerektirirken, Floatkit bu s\u00fcreci basitle\u015ftirir. Geli\u015ftiricilerin, kullan\u0131c\u0131 etkile\u015fimini art\u0131racak, estetik ve i\u015flevsel bile\u015fenleri minimum \u00e7abayla olu\u015fturmas\u0131na olanak tan\u0131r. B\u00f6ylece, geli\u015ftiriciler daha \u00e7ok uygulaman\u0131n temel i\u015f mant\u0131\u011f\u0131na odaklanabilirken, aray\u00fcz detaylar\u0131 Floatkit’in g\u00fc\u00e7l\u00fc yap\u0131s\u0131na emanet edilmi\u015f olur. Bu yakla\u015f\u0131m, hem geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131r hem de ortaya \u00e7\u0131kan \u00fcr\u00fcn\u00fcn kalitesini art\u0131r\u0131r.<\/p>\n
Floatkit, modern web standartlar\u0131n\u0131 temel alan, reaktif ve mod\u00fcler bir UI k\u00fct\u00fcphanesidir. Ad\u0131ndan da anla\u015f\u0131laca\u011f\u0131 gibi, temel odak noktas\u0131, web sayfalar\u0131 \u00fczerinde “y\u00fczen” veya katmanl\u0131 g\u00f6r\u00fcnen etkile\u015fimli bile\u015fenlerdir. Ancak bu sadece y\u00fczen elemanlarla s\u0131n\u0131rl\u0131 de\u011fildir; Floatkit, genel kullan\u0131c\u0131 aray\u00fcz\u00fc geli\u015ftirme s\u00fcre\u00e7lerini basitle\u015ftirmeyi hedefler. Temel felsefesi, Geleneksel web geli\u015ftirme yakla\u015f\u0131mlar\u0131nda, \u00f6zellikle karma\u015f\u0131k UI bile\u015fenlerini y\u00f6netmek, bir\u00e7ok zorlu\u011fu beraberinde getirir. \u00d6rne\u011fin, bir modal penceresi olu\u015ftururken sadece g\u00f6rsel tasar\u0131m\u0131 de\u011fil, ayn\u0131 zamanda klavye navigasyonu, ekran okuyucu uyumlulu\u011fu, odak y\u00f6netimi ve farkl\u0131 ekran boyutlar\u0131na adaptasyon gibi bir\u00e7ok detay\u0131 d\u00fc\u015f\u00fcnmek gerekir. Bu detaylar genellikle manuel JavaScript yaz\u0131l\u0131m\u0131, karma\u015f\u0131k CSS kurallar\u0131 ve test s\u00fcre\u00e7leriyle y\u00f6netilir. Bu durum, \u00f6zellikle b\u00fcy\u00fck projelerde zaman kayb\u0131na, hata potansiyelinin artmas\u0131na ve bak\u0131m maliyetlerinin y\u00fckselmesine neden olabilir. Ayr\u0131ca, farkl\u0131 taray\u0131c\u0131lar\u0131n ve cihazlar\u0131n kendine \u00f6zg\u00fc davran\u0131\u015flar\u0131, geli\u015ftiricileri s\u00fcrekli uyumluluk sorunlar\u0131yla u\u011fra\u015fmaya iter.<\/p>\n Floatkit, bu zorluklar\u0131n \u00fcstesinden gelmek i\u00e7in entegre \u00e7\u00f6z\u00fcmler sunar. \u00d6rne\u011fin, bir modal bile\u015feni Floatkit ile olu\u015fturuldu\u011funda, eri\u015filebilirlik standartlar\u0131 (WCAG) otomatik olarak sa\u011flan\u0131r. Odak y\u00f6netimi, klavye etkile\u015fimleri (\u00f6rne\u011fin, Esc<\/kbd> tu\u015fu ile kapatma) ve ekran okuyucu deste\u011fi gibi \u00f6zellikler kutudan \u00e7\u0131kt\u0131\u011f\u0131 haliyle (out-of-the-box) gelir. Bu, geli\u015ftiricilerin her bile\u015fen i\u00e7in bu detaylar\u0131 tekrar tekrar kodlamak zorunda kalmamas\u0131n\u0131 sa\u011flar. Ayr\u0131ca, Floatkit’in mod\u00fcler yap\u0131s\u0131, sadece ihtiyac\u0131n\u0131z olan bile\u015fenleri projenize dahil etmenize olanak tan\u0131r, bu da uygulaman\u0131z\u0131n genel boyutunu (bundle size) ve y\u00fckleme s\u00fcresini optimize eder. Floatkit, modern JavaScript ve CSS tekniklerini kullanarak, taray\u0131c\u0131lar aras\u0131 tutarl\u0131 bir deneyim sunar ve geli\u015ftiricilerin bu uyumluluk sorunlar\u0131yla daha az zaman harcamas\u0131n\u0131 sa\u011flar.<\/p>\n Modern web uygulamalar\u0131n\u0131n ba\u015far\u0131s\u0131, b\u00fcy\u00fck \u00f6l\u00e7\u00fcde sunduklar\u0131 kullan\u0131c\u0131 deneyimine (UX) ve eri\u015filebilirlik seviyesine ba\u011fl\u0131d\u0131r. Kullan\u0131c\u0131 deneyimi, bir kullan\u0131c\u0131n\u0131n bir web sitesi veya uygulama ile etkile\u015fim kurarken hissettiklerini, alg\u0131lad\u0131klar\u0131n\u0131 ve tepkilerini kapsar. Ak\u0131c\u0131 animasyonlar, sezgisel gezinme, h\u0131zl\u0131 y\u00fckleme s\u00fcreleri ve tutarl\u0131 bir tasar\u0131m, olumlu bir kullan\u0131c\u0131 deneyiminin temelini olu\u015fturur. K\u00f6t\u00fc bir kullan\u0131c\u0131 deneyimi ise kullan\u0131c\u0131lar\u0131n siteyi terk etmesine, markaya kar\u015f\u0131 olumsuz bir alg\u0131 geli\u015ftirmesine ve potansiyel m\u00fc\u015fteri kayb\u0131na yol a\u00e7abilir. Floatkit, bu noktada geli\u015ftiricilere, kullan\u0131c\u0131lar\u0131n beklentilerini kar\u015f\u0131layacak, hatta a\u015facak estetik ve i\u015flevsel aray\u00fczler olu\u015fturma g\u00fcc\u00fc verir. \u00d6zellikle “y\u00fczen” elemanlar\u0131n do\u011fru konumland\u0131r\u0131lmas\u0131, zamanlamas\u0131 ve etkile\u015fimi, kullan\u0131c\u0131lar\u0131n dikkatini \u00e7ekmede ve \u00f6nemli bilgileri vurgulamada kritik rol oynar.<\/p>\n Eri\u015filebilirlik (Accessibility) ise, web sitelerinin ve uygulamalar\u0131n\u0131n herkes taraf\u0131ndan, engeli ne olursa olsun, kullan\u0131labilir olmas\u0131n\u0131 sa\u011flama prati\u011fidir. G\u00f6rme engelli kullan\u0131c\u0131lar i\u00e7in ekran okuyucular, motor beceri bozuklu\u011fu olanlar i\u00e7in klavye navigasyonu, i\u015fitme engelliler i\u00e7in altyaz\u0131lar gibi unsurlar, eri\u015filebilirli\u011fin temel ta\u015flar\u0131d\u0131r. Eri\u015filebilir bir web sitesi sadece yasal bir zorunluluk de\u011fil, ayn\u0131 zamanda daha geni\u015f bir kitleye ula\u015fman\u0131n ve kapsay\u0131c\u0131 bir dijital deneyim sunman\u0131n anahtar\u0131d\u0131r. Floatkit, bile\u015fenlerini tasarlarken ve geli\u015ftirirken WCAG (Web \u0130\u00e7eri\u011fi Eri\u015filebilirlik Y\u00f6nergeleri) standartlar\u0131n\u0131 merkeze al\u0131r. Bu sayede, Floatkit ile olu\u015fturulan modallar, ara\u00e7 ipu\u00e7lar\u0131 ve di\u011fer etkile\u015fimli elemanlar, ekran okuyucular taraf\u0131ndan do\u011fru bir \u015fekilde yorumlan\u0131r, klavye ile kolayca kontrol edilebilir ve renk kontrast\u0131 gibi g\u00f6rsel eri\u015filebilirlik fakt\u00f6rleri g\u00f6z \u00f6n\u00fcnde bulundurulur. Floatkit, geli\u015ftiricilerin eri\u015filebilirlik konusunda uzmanla\u015fmas\u0131na gerek kalmadan, varsay\u0131lan olarak eri\u015filebilir aray\u00fczler olu\u015fturmalar\u0131n\u0131 sa\u011flayarak, bu alandaki y\u00fck\u00fc b\u00fcy\u00fck \u00f6l\u00e7\u00fcde hafifletir.<\/p>\n Floatkit, modern web geli\u015ftirme ihtiya\u00e7lar\u0131na yan\u0131t vermek \u00fczere tasarlanm\u0131\u015f bir dizi temel \u00f6zellik ve g\u00fc\u00e7l\u00fc bir mimari yap\u0131ya sahiptir. Bu \u00f6zellikler, geli\u015ftiricilerin hem verimli hem de y\u00fcksek performansl\u0131 uygulamalar olu\u015fturmas\u0131na olanak tan\u0131r. Floatkit’in mimarisi, mod\u00fclerlik, reaktivite ve optimizasyon ilkeleri \u00fczerine kuruludur, bu da onu g\u00fcn\u00fcm\u00fcz\u00fcn karma\u015f\u0131k web projeleri i\u00e7in ideal bir se\u00e7im haline getirir. Gelin, Floatkit’i rakiplerinden ay\u0131ran bu temel \u00f6zelliklere daha yak\u0131ndan bakal\u0131m.<\/p>\n Floatkit’in en \u00f6nemli \u00f6zelliklerinden biri, son derece mod\u00fcler bir yap\u0131ya sahip olmas\u0131d\u0131r. Bu, geli\u015ftiricilerin sadece ihtiya\u00e7 duyduklar\u0131 bile\u015fenleri veya mod\u00fclleri projelerine dahil edebilece\u011fi anlam\u0131na gelir. \u00d6rne\u011fin, e\u011fer projenizde sadece bir modal penceresine ihtiyac\u0131n\u0131z varsa, Floatkit’in t\u00fcm k\u00fct\u00fcphanesini de\u011fil, yaln\u0131zca modal mod\u00fcl\u00fcn\u00fc i\u00e7e aktarabilirsiniz. Bu “a\u011fa\u00e7 sallama” (tree-shaking) dostu yakla\u015f\u0131m, uygulaman\u0131z\u0131n nihai boyutunu (bundle size) \u00f6nemli \u00f6l\u00e7\u00fcde k\u00fc\u00e7\u00fclt\u00fcr ve dolay\u0131s\u0131yla sayfa y\u00fckleme s\u00fcrelerini iyile\u015ftirir. Daha k\u00fc\u00e7\u00fck bir dosya boyutu, \u00f6zellikle mobil cihazlarda veya yava\u015f internet ba\u011flant\u0131lar\u0131nda kullan\u0131c\u0131 deneyimi a\u00e7\u0131s\u0131ndan kritik bir avantaj sa\u011flar. Floatkit’in hafif tasar\u0131m\u0131, gereksiz ba\u011f\u0131ml\u0131l\u0131klardan ka\u00e7\u0131narak ve optimize edilmi\u015f kod yaz\u0131m\u0131na odaklanarak elde edilmi\u015ftir. Bu sayede, k\u00fct\u00fcphanenin kendisi minimum sistem kayna\u011f\u0131 t\u00fcketir ve mevcut web uygulaman\u0131z\u0131n performans\u0131n\u0131 olumsuz etkilemez. Mod\u00fclerlik ayn\u0131 zamanda kodun daha okunabilir, bak\u0131m\u0131 daha kolay ve geni\u015fletilebilir olmas\u0131n\u0131 sa\u011flar. Geli\u015ftiriciler, ihtiya\u00e7 duyduklar\u0131nda mevcut bile\u015fenleri \u00f6zelle\u015ftirebilir veya kendi \u00f6zel bile\u015fenlerini Floatkit’in mimarisine uygun \u015fekilde olu\u015fturabilirler.<\/p>\n Floatkit, reaktif programlama prensiplerini benimseyen bile\u015fenler sunar. Bu, kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn (UI) uygulaman\u0131n veri durumu (state) ile senkronize bir \u015fekilde g\u00fcncellendi\u011fi anlam\u0131na gelir. Veri durumunda yap\u0131lan herhangi bir de\u011fi\u015fiklik, ilgili UI bile\u015fenlerinin otomatik olarak yeniden render edilmesini (\u00e7izilmesini) tetikler. Bu yakla\u015f\u0131m, \u00f6zellikle dinamik ve veri odakl\u0131 uygulamalarda geli\u015ftirme s\u00fcrecini b\u00fcy\u00fck \u00f6l\u00e7\u00fcde basitle\u015ftirir. Geli\u015ftiricilerin, DOM’u (Belge Nesne Modeli) manuel olarak manip\u00fcle etmek yerine, sadece veri durumunu g\u00fcncellemesi yeterlidir. Floatkit, bu reaktiviteyi, modern JavaScript \u00f6zelliklerini ve optimize edilmi\u015f bir sanal DOM (Virtual DOM) veya benzeri bir mekanizmay\u0131 kullanarak sa\u011flar. Bu sayede, sadece ger\u00e7ekten de\u011fi\u015fen UI k\u0131s\u0131mlar\u0131 g\u00fcncellenir, bu da performans\u0131 art\u0131r\u0131r. Floatkit’in veri ak\u0131\u015f\u0131 y\u00f6netimi, karma\u015f\u0131k uygulamalarda bile bile\u015fenler aras\u0131nda veri payla\u015f\u0131m\u0131n\u0131 ve ileti\u015fimi kolayla\u015ft\u0131r\u0131r. Olay tabanl\u0131 (event-driven) bir mimari ile bile\u015fenler birbirleriyle etkile\u015fime girebilir, veri g\u00f6nderebilir ve alabilir. Bu tutarl\u0131 ve \u00f6ng\u00f6r\u00fclebilir veri ak\u0131\u015f\u0131, hatalar\u0131n tespitini kolayla\u015ft\u0131r\u0131r ve uygulaman\u0131n genel g\u00fcvenilirli\u011fini art\u0131r\u0131r. Geli\u015ftiriciler, Floatkit’in sa\u011flad\u0131\u011f\u0131 API’ler arac\u0131l\u0131\u011f\u0131yla kolayca kendi veri y\u00f6netim stratejilerini entegre edebilir veya mevcut global durum y\u00f6netim k\u00fct\u00fcphaneleriyle (\u00f6rne\u011fin Redux, Vuex) uyumlu \u00e7al\u0131\u015fabilir.<\/p>\n Web uygulamalar\u0131n\u0131n farkl\u0131 taray\u0131c\u0131larda (Chrome, Firefox, Safari, Edge vb.) ve \u00e7e\u015fitli cihazlarda (masa\u00fcst\u00fc, tablet, mobil) sorunsuz \u00e7al\u0131\u015fmas\u0131, ba\u015far\u0131l\u0131 bir kullan\u0131c\u0131 deneyimi i\u00e7in elzemdir. Floatkit, geli\u015ftirme s\u00fcrecinin ba\u015f\u0131ndan itibaren \u00e7apraz taray\u0131c\u0131 uyumlulu\u011fu g\u00f6z \u00f6n\u00fcnde bulundurularak tasarlanm\u0131\u015ft\u0131r. K\u00fct\u00fcphane, modern web standartlar\u0131n\u0131 kullan\u0131r ve gerekirse taray\u0131c\u0131 farkl\u0131l\u0131klar\u0131n\u0131 gidermek i\u00e7in dahili polyfill’ler (uyumluluk katmanlar\u0131) veya adaptasyon stratejileri uygular. Bu sayede geli\u015ftiriciler, yazd\u0131klar\u0131 kodun farkl\u0131 ortamlarda tutarl\u0131 bir \u015fekilde \u00e7al\u0131\u015faca\u011f\u0131ndan emin olabilirler ve manuel uyumluluk testlerine daha az zaman ay\u0131r\u0131rlar.<\/p>\n Performans optimizasyonu da Floatkit’in temel direklerinden biridir. K\u00fct\u00fcphane, bile\u015fenlerin h\u0131zl\u0131 y\u00fcklenmesini, ak\u0131c\u0131 animasyonlar sunmas\u0131n\u0131 ve minimum kaynak t\u00fcketmesini sa\u011flamak i\u00e7in \u00e7e\u015fitli teknikler kullan\u0131r:<\/p>\n Bu optimizasyon teknikleri, Floatkit ile geli\u015ftirilen uygulamalar\u0131n hem h\u0131zl\u0131 hem de duyarl\u0131 olmas\u0131n\u0131 garanti eder. Kullan\u0131c\u0131lar, h\u0131zl\u0131 yan\u0131t veren ve tak\u0131lmayan aray\u00fczlerle daha iyi bir deneyim ya\u015farlar, bu da uygulaman\u0131n genel kalitesini ve kullan\u0131c\u0131 memnuniyetini art\u0131r\u0131r.<\/p>\n Floatkit, modern web geli\u015ftirme prati\u011finde eri\u015filebilirli\u011fin ne kadar kritik oldu\u011funun fark\u0131ndad\u0131r ve bu prensibi temel tasar\u0131m kararlar\u0131n\u0131n merkezine yerle\u015ftirmi\u015ftir. Eri\u015filebilirlik, sadece yasal bir zorunluluk olman\u0131n \u00f6tesinde, daha geni\u015f bir kullan\u0131c\u0131 kitlesine ula\u015fmay\u0131 ve kapsay\u0131c\u0131 bir dijital deneyim sunmay\u0131 ama\u00e7lar. Floatkit ile geli\u015ftirilen her bile\u015fen, Web \u0130\u00e7eri\u011fi Eri\u015filebilirlik Y\u00f6nergeleri (WCAG) standartlar\u0131na uygun olacak \u015fekilde tasarlanm\u0131\u015ft\u0131r. Bu, g\u00f6rme engelli kullan\u0131c\u0131lar i\u00e7in ekran okuyucular\u0131n bile\u015fenleri do\u011fru bir \u015fekilde yorumlayabilmesi, motor beceri bozuklu\u011fu olan kullan\u0131c\u0131lar\u0131n klavye ile kolayca gezinebilmesi ve etkile\u015fimde bulunabilmesi anlam\u0131na gelir.<\/p>\n \u00d6zellikle “y\u00fczen” bile\u015fenler (modallar, ara\u00e7 ipu\u00e7lar\u0131, a\u00e7\u0131l\u0131r men\u00fcler) eri\u015filebilirlik a\u00e7\u0131s\u0131ndan karma\u015f\u0131k zorluklar bar\u0131nd\u0131r\u0131r. Floatkit, bu zorluklar\u0131 otomatik olarak ele al\u0131r:<\/p>\n Floatkit, geli\u015ftiricilerin eri\u015filebilirlik konusunda derinlemesine bilgi sahibi olmas\u0131na gerek kalmadan, varsay\u0131lan olarak y\u00fcksek eri\u015filebilirlik standartlar\u0131na sahip uygulamalar olu\u015fturmalar\u0131n\u0131 sa\u011flayarak, bu alandaki y\u00fck\u00fc b\u00fcy\u00fck \u00f6l\u00e7\u00fcde hafifletir. Bu, hem geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131r hem de son \u00fcr\u00fcn\u00fcn daha kapsay\u0131c\u0131 ve kullan\u0131c\u0131 dostu olmas\u0131n\u0131 garantiler.<\/p>\n Floatkit’in sundu\u011fu t\u00fcm avantajlardan yararlanmak i\u00e7in, \u00f6ncelikle geli\u015ftirme ortam\u0131n\u0131z\u0131 kurman\u0131z ve ilk bile\u015fenlerinizi olu\u015fturmaya ba\u015flaman\u0131z gerekir. Floatkit, modern web geli\u015ftirme ekosistemine sorunsuz bir \u015fekilde entegre olacak \u015fekilde tasarlanm\u0131\u015ft\u0131r. Bu b\u00f6l\u00fcmde, Floatkit’i projenize nas\u0131l dahil edece\u011finizi ve basit bir modal penceresi \u00f6rne\u011fi \u00fczerinden ilk ad\u0131mlar\u0131n\u0131z\u0131 nas\u0131l ataca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m inceleyece\u011fiz. Bu s\u00fcre\u00e7, Floatkit’in ne kadar h\u0131zl\u0131 ve kolay bir \u015fekilde kullan\u0131lmaya ba\u015flanabilece\u011fini g\u00f6sterecektir.<\/p>\n Floatkit’i projenize dahil etmenin en yayg\u0131n ve \u00f6nerilen yolu, bir paket y\u00f6neticisi (package manager) kullanmakt\u0131r. npm<\/a> veya Yarn<\/a> gibi ara\u00e7larla Floatkit’i kolayca kurabilirsiniz. Bu y\u00f6ntem, ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00f6netmenize ve Floatkit’i di\u011fer JavaScript k\u00fct\u00fcphanelerinizle birlikte kullanman\u0131za olanak tan\u0131r.<\/p>\n \u00d6ncelikle, projenizin k\u00f6k dizininde bir terminal (komut istemcisi) a\u00e7\u0131n ve a\u015fa\u011f\u0131daki komutlardan birini \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n Bu komut, Floatkit k\u00fct\u00fcphanesini projenizin E\u011fer projenizde bir build arac\u0131 (Webpack, Vite, Rollup vb.) kullan\u0131yorsan\u0131z, Floatkit’in CSS dosyalar\u0131n\u0131 da projenize dahil etmeniz gerekebilir. Genellikle bu, ana CSS dosyan\u0131zda veya JavaScript dosyan\u0131zda bir import ifadesiyle yap\u0131l\u0131r:<\/p>\n Bu ad\u0131mlar\u0131 tamamlad\u0131ktan sonra, Floatkit’in g\u00fcc\u00fcn\u00fc projenizde kullanmaya ba\u015flayabilirsiniz. Kurulum s\u00fcreci, modern JavaScript geli\u015ftirme ortamlar\u0131na a\u015fina olanlar i\u00e7in olduk\u00e7a tan\u0131d\u0131k ve basittir.<\/p>\n Floatkit’in nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 anlaman\u0131n en iyi yolu, pratik bir \u00f6rnek \u00fczerinden gitmektir. Basit bir modal penceresi (diyalog kutusu) olu\u015fturarak Floatkit’in g\u00fcc\u00fcn\u00fc ve kullan\u0131m kolayl\u0131\u011f\u0131n\u0131 g\u00f6zlemleyelim. Bu \u00f6rnekte, bir d\u00fc\u011fmeye t\u0131kland\u0131\u011f\u0131nda a\u00e7\u0131lan ve kapat\u0131labilen bir modal olu\u015fturaca\u011f\u0131z.<\/p>\n \u00d6ncelikle, HTML yap\u0131m\u0131z\u0131 haz\u0131rlayal\u0131m. Modal\u0131 tetikleyecek bir d\u00fc\u011fme ve modal\u0131n i\u00e7eri\u011fini bar\u0131nd\u0131racak bir \u015eimdi JavaScript k\u0131sm\u0131na ge\u00e7elim. Floatkit’in Bu kod blo\u011fu, Floatkit, responsive (duyarl\u0131) tasar\u0131m\u0131 temelden destekleyecek \u015fekilde in\u015fa edilmi\u015ftir. Bile\u015fenleri, farkl\u0131 ekran boyutlar\u0131na ve cihazlara otomatik olarak adapte olabilen esnek bir yap\u0131ya sahiptir. Bu, geli\u015ftiricilerin ekstradan karma\u015f\u0131k medya sorgular\u0131 (media queries) yazmas\u0131na gerek kalmadan, t\u00fcm cihazlarda harika g\u00f6r\u00fcnen ve \u00e7al\u0131\u015fan aray\u00fczler olu\u015fturmas\u0131n\u0131 sa\u011flar.<\/p>\n Floatkit’in responsive tasar\u0131m yetenekleri birka\u00e7 temel prensibe dayan\u0131r:<\/p>\n \u00d6rne\u011fin, yukar\u0131daki modal \u00f6rne\u011fimiz, Floatkit’in varsay\u0131lan stilleri sayesinde k\u00fc\u00e7\u00fck bir mobil ekranda merkezlenmi\u015f ve uygun boyutlarda g\u00f6r\u00fcn\u00fcrken, b\u00fcy\u00fck bir masa\u00fcst\u00fc ekranda da estetik bir \u015fekilde yerle\u015fecektir. E\u011fer daha spesifik responsive davran\u0131\u015flar gerekiyorsa, Floatkit’in sa\u011flad\u0131\u011f\u0131 API’ler veya stil \u00f6zelle\u015ftirme se\u00e7enekleri ile kolayca m\u00fcdahale edebilirsiniz.<\/p>\n Diyelim ki, belirli bir ekran geni\u015fli\u011finin alt\u0131nda modal\u0131n tam ekran olmas\u0131n\u0131 istiyorsunuz. Bunu Floatkit’in callback’leri veya do\u011frudan CSS medya sorgular\u0131 ile yapabilirsiniz:<\/p>\n Bu CSS kural\u0131, 768 piksel ve alt\u0131ndaki ekran geni\u015fliklerinde modal i\u00e7eri\u011finin t\u00fcm ekran\u0131 kaplamas\u0131n\u0131 sa\u011flar. Floatkit, bu t\u00fcr \u00f6zelle\u015ftirmeler i\u00e7in sa\u011flam bir temel sunar. Geli\u015ftiriciler, k\u00fct\u00fcphanenin sundu\u011fu esnekli\u011fi kullanarak, projelerinin \u00f6zel responsive ihtiya\u00e7lar\u0131na g\u00f6re uyarlamalar yapabilirler. Floatkit’in bu yetenekleri, web uygulamalar\u0131n\u0131z\u0131n her kullan\u0131c\u0131 ve her cihaz i\u00e7in en iyi deneyimi sunmas\u0131n\u0131 garanti eder.<\/p>\n Floatkit’in temel kurulumu ve basit bile\u015fen kullan\u0131m\u0131 olduk\u00e7a kolay olsa da, k\u00fct\u00fcphanenin ger\u00e7ek g\u00fcc\u00fc ileri seviye kullan\u0131m senaryolar\u0131nda ortaya \u00e7\u0131kar. Dinamik i\u00e7erik y\u00f6netimi, API entegrasyonlar\u0131, kapsaml\u0131 \u00f6zelle\u015ftirme se\u00e7enekleri ve performans ipu\u00e7lar\u0131, Floatkit’i sadece bir UI k\u00fct\u00fcphanesi olmaktan \u00e7\u0131kar\u0131p, karma\u015f\u0131k web uygulamalar\u0131 geli\u015ftirmek i\u00e7in sa\u011flam bir temel haline getirir. Bu b\u00f6l\u00fcmde, Floatkit’in sundu\u011fu daha geli\u015fmi\u015f \u00f6zellikleri ve bunlar\u0131 projelerinizde nas\u0131l kullanabilece\u011finizi ke\u015ffedece\u011fiz. Ayr\u0131ca, ger\u00e7ek d\u00fcnya senaryolar\u0131ndan al\u0131nm\u0131\u015f bir vaka analizi ile Floatkit’in pratik de\u011ferini ortaya koyaca\u011f\u0131z.<\/p>\n Modern web uygulamalar\u0131 genellikle d\u0131\u015f kaynaklardan (API’ler) veri \u00e7eker ve bu verileri dinamik olarak kullan\u0131c\u0131 aray\u00fcz\u00fcnde g\u00f6sterir. Floatkit, bile\u015fenlerinin i\u00e7eri\u011fini dinamik olarak g\u00fcncelleme ve API’lerle sorunsuz bir \u015fekilde entegre olma yetene\u011fi sayesinde bu t\u00fcr senaryolar i\u00e7in idealdir. \u00d6rne\u011fin, bir kullan\u0131c\u0131 bir \u00fcr\u00fcne t\u0131klad\u0131\u011f\u0131nda, \u00fcr\u00fcn detaylar\u0131n\u0131 bir API’den \u00e7ekip bir modal penceresinde g\u00f6stermek isteyebilirsiniz.<\/p>\n Floatkit’in reaktif yap\u0131s\u0131, bu dinamik i\u00e7erik g\u00fcncellemelerini kolayla\u015ft\u0131r\u0131r. Modal\u0131n veya ba\u015fka bir Floatkit bile\u015feninin i\u00e7eri\u011fini, veri geldikten sonra JavaScript ile kolayca de\u011fi\u015ftirebilirsiniz. \u0130\u015fte bir \u00f6rnek:<\/p>\n Bu senaryoda, modal a\u00e7\u0131ld\u0131\u011f\u0131nda “Y\u00fckleniyor…” mesaj\u0131 g\u00f6sterilir, ard\u0131ndan API’den veri \u00e7ekilir ve gelen verilerle modal\u0131n i\u00e7eri\u011fi g\u00fcncellenir. Bu yakla\u015f\u0131m, kullan\u0131c\u0131ya her zaman g\u00fcncel ve ilgili bilgileri sunarken, asenkron veri y\u00fckleme s\u00fcre\u00e7lerini sorunsuz bir \u015fekilde y\u00f6netmenizi sa\u011flar. Floatkit’in esnek yap\u0131s\u0131, bu t\u00fcr dinamik i\u00e7erik g\u00fcncellemelerini herhangi bir k\u0131s\u0131tlama olmaks\u0131z\u0131n uygulaman\u0131za entegre etmenize olanak tan\u0131r.<\/p>\n Her projenin kendine \u00f6zg\u00fc bir marka kimli\u011fi ve tasar\u0131m dili vard\u0131r. Floatkit, bu ihtiyac\u0131 kar\u015f\u0131lamak i\u00e7in kapsaml\u0131 \u00f6zelle\u015ftirme se\u00e7enekleri sunar. Bile\u015fenlerin g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc ve hissini (look and feel) projenizin gereksinimlerine g\u00f6re kolayca uyarlayabilirsiniz.<\/p>\n CSS De\u011fi\u015fkenleri (CSS Variables):<\/strong> Floatkit, bir\u00e7ok stil \u00f6zelli\u011fini CSS de\u011fi\u015fkenleri (custom properties) arac\u0131l\u0131\u011f\u0131yla yap\u0131land\u0131r\u0131labilir hale getirir. Bu, global stil dosyan\u0131zda sadece birka\u00e7 de\u011fi\u015fkeni de\u011fi\u015ftirerek t\u00fcm Floatkit bile\u015fenlerinin temas\u0131n\u0131 de\u011fi\u015ftirebilece\u011finiz anlam\u0131na gelir:<\/p>\n Bu de\u011fi\u015fkenleri kendi projenizin CSS dosyas\u0131nda tan\u0131mlayarak, Floatkit’in varsay\u0131lan temalar\u0131n\u0131 h\u0131zla kendi marka renklerinize ve stilinize uygun hale getirebilirsiniz. Bu y\u00f6ntem, s\u00fcrd\u00fcr\u00fclebilir ve kolayca y\u00f6netilebilir bir tema sistemi olu\u015fturman\u0131n modern bir yoludur.<\/p>\n SASS\/SCSS De\u011fi\u015fkenleri:<\/strong> E\u011fer projenizde SASS veya SCSS kullan\u0131yorsan\u0131z, Floatkit genellikle \u00f6nceden tan\u0131mlanm\u0131\u015f SASS de\u011fi\u015fkenleri arac\u0131l\u0131\u011f\u0131yla daha derinlemesine \u00f6zelle\u015ftirme imkan\u0131 sunar. Bu de\u011fi\u015fkenleri kendi \u00d6zel CSS S\u0131n\u0131flar\u0131 ve \u0130\u00e7erik Yap\u0131s\u0131:<\/strong> Floatkit bile\u015fenleri, genellikle belirli HTML s\u0131n\u0131flar\u0131 ile gelir. Bu s\u0131n\u0131flar\u0131 hedefleyerek veya bile\u015fenlerinize kendi \u00f6zel s\u0131n\u0131flar\u0131n\u0131z\u0131 ekleyerek, do\u011frudan CSS ile ek stil tan\u0131mlamalar\u0131 yapabilirsiniz. Floatkit’in esnek HTML yap\u0131s\u0131, i\u00e7eriklerinizi istedi\u011finiz gibi d\u00fczenlemenize ve stilize etmenize olanak tan\u0131r. Bu sayede, Floatkit’in sundu\u011fu fonksiyonelli\u011fi korurken, g\u00f6rsel olarak tamamen benzersiz bir deneyim yaratabilirsiniz.<\/p>\n Floatkit zaten performans odakl\u0131 tasarlanm\u0131\u015f olsa da, geli\u015ftiricilerin uygulayabilece\u011fi baz\u0131 en iyi uygulamalar ve ipu\u00e7lar\u0131 ile performans\u0131 daha da art\u0131rmak m\u00fcmk\u00fcnd\u00fcr:<\/p>\n Bu ipu\u00e7lar\u0131n\u0131 uygulayarak, Floatkit ile geli\u015ftirilen uygulamalar\u0131n\u0131z\u0131n hem h\u0131zl\u0131 hem de ak\u0131c\u0131 olmas\u0131n\u0131 sa\u011flayabilir, kullan\u0131c\u0131lar\u0131n\u0131za kesintisiz bir deneyim sunabilirsiniz.<\/p>\n T\u00fcrkiye’nin \u00f6nde gelen e-ticaret platformlar\u0131ndan biri olan “H\u0131zl\u0131Sepet”, kullan\u0131c\u0131 deneyimini (UX) modernle\u015ftirmek ve site performans\u0131n\u0131 art\u0131rmak amac\u0131yla mevcut UI k\u00fct\u00fcphanesini Floatkit ile de\u011fi\u015ftirmeye karar verdi. H\u0131zl\u0131Sepet’in eski sistemi, \u00fcr\u00fcn detay modallar\u0131, sepet bildirimleri ve kullan\u0131c\u0131 profili a\u00e7\u0131l\u0131r men\u00fcleri gibi bir\u00e7ok “y\u00fczen” eleman\u0131 manuel JavaScript ve eski jQuery eklentileriyle y\u00f6netiyordu. Bu durum, \u00f6zellikle mobil cihazlarda performans sorunlar\u0131na, eri\u015filebilirlik eksikliklerine ve yeni \u00f6zelliklerin geli\u015ftirilmesinde yava\u015flamalara neden oluyordu.<\/p>\n Mevcut Durumun Zorluklar\u0131:<\/strong><\/p>\n Floatkit Entegrasyonu ve Sonu\u00e7lar\u0131:<\/strong><\/p>\n H\u0131zl\u0131Sepet ekibi, Floatkit’in mod\u00fcler yap\u0131s\u0131n\u0131, eri\u015filebilirlik odakl\u0131 yakla\u015f\u0131m\u0131n\u0131 ve performans optimizasyonlar\u0131n\u0131 dikkate alarak kademeli bir entegrasyon s\u00fcrecine ba\u015flad\u0131. \u0130lk olarak, en kritik bile\u015fen olan \u00fcr\u00fcn detay modal\u0131 Floatkit ile yeniden yaz\u0131ld\u0131. Ard\u0131ndan, sepet bildirimleri ve kullan\u0131c\u0131 profil a\u00e7\u0131l\u0131r men\u00fcleri de Floatkit bile\u015fenleriyle de\u011fi\u015ftirildi.<\/p>\n H\u0131zl\u0131Sepet \u00f6rne\u011fi, Floatkit’in sadece k\u00fc\u00e7\u00fck projeler i\u00e7in de\u011fil, ayn\u0131 zamanda b\u00fcy\u00fck \u00f6l\u00e7ekli ve y\u00fcksek trafikli e-ticaret platformlar\u0131 gibi karma\u015f\u0131k sistemler i\u00e7in de ne kadar de\u011ferli bir \u00e7\u00f6z\u00fcm oldu\u011funu a\u00e7\u0131k\u00e7a g\u00f6stermektedir. Floatkit, hem geli\u015ftirici verimlili\u011fini art\u0131r\u0131rken hem de son kullan\u0131c\u0131ya daha iyi bir deneyim sunarak, modern web geli\u015ftirme ihtiya\u00e7lar\u0131na kapsaml\u0131 bir yan\u0131t vermektedir.<\/p>\n Bu makale boyunca, Floatkit’in modern web geli\u015ftirme d\u00fcnyas\u0131na nas\u0131l bir yenilik getirdi\u011fini, temel \u00f6zelliklerinden kurulumuna, basit kullan\u0131m \u00f6rneklerinden ileri seviye senaryolara kadar detayl\u0131 bir \u015fekilde inceledik. Floatkit, \u00f6zellikle dinamik ve etkile\u015fimli “y\u00fczen” kullan\u0131c\u0131 aray\u00fcz\u00fc bile\u015fenleri olu\u015fturma s\u00fcrecindeki zorluklar\u0131 ortadan kald\u0131rarak, geli\u015ftiricilere zaman kazand\u0131ran, performans odakl\u0131 ve eri\u015filebilir bir \u00e7\u00f6z\u00fcm sunuyor. Mod\u00fcler yap\u0131s\u0131, reaktif bile\u015fenleri, \u00e7apraz taray\u0131c\u0131 uyumlulu\u011fu ve kapsaml\u0131 \u00f6zelle\u015ftirme se\u00e7enekleri ile Floatkit, her b\u00fcy\u00fckl\u00fckteki projenin ihtiya\u00e7lar\u0131na cevap verebilecek kapasitede bir ara\u00e7 oldu\u011funu kan\u0131tl\u0131yor.<\/p>\n Geleneksel y\u00f6ntemlerin getirdi\u011fi karma\u015f\u0131kl\u0131k, performans d\u00fc\u015f\u00fc\u015fleri ve eri\u015filebilirlik eksiklikleri kar\u015f\u0131s\u0131nda Floatkit, modern web standartlar\u0131n\u0131 benimseyen, hafif ve esnek bir alternatif sunuyor. H\u0131zl\u0131Sepet gibi ger\u00e7ek d\u00fcnya vaka analizleri, Floatkit’in sadece teoride de\u011fil, pratikte de b\u00fcy\u00fck \u00f6l\u00e7ekli projelerde nas\u0131l somut faydalar sa\u011flad\u0131\u011f\u0131n\u0131 g\u00f6steriyor. Geli\u015ftirici verimlili\u011fini art\u0131r\u0131rken, son kullan\u0131c\u0131ya daha ak\u0131c\u0131, daha h\u0131zl\u0131 ve daha kapsay\u0131c\u0131 bir deneyim sunma potansiyeli, Floatkit’i gelece\u011fin webini in\u015fa etmek isteyen her geli\u015ftirici i\u00e7in vazge\u00e7ilmez bir ara\u00e7 haline getiriyor.<\/p>\n Floatkit’in canl\u0131ya al\u0131nmas\u0131, web geli\u015ftirme toplulu\u011fu i\u00e7in \u00f6nemli bir d\u00f6n\u00fcm noktas\u0131d\u0131r. \u00d6n\u00fcm\u00fczdeki d\u00f6nemde, Floatkit’in daha da geli\u015ferek yeni \u00f6zellikler ve entegrasyonlar sunmas\u0131 bekleniyor. Geli\u015ftiricilerin bu yeni arac\u0131 benimsemesiyle birlikte, daha performansl\u0131, daha eri\u015filebilir ve kullan\u0131c\u0131 dostu web uygulamalar\u0131n\u0131n say\u0131s\u0131 artacakt\u0131r. E\u011fer siz de projenizde kullan\u0131c\u0131 aray\u00fcz\u00fc geli\u015ftirme s\u00fcre\u00e7lerini basitle\u015ftirmek, performans\u0131 art\u0131rmak ve eri\u015filebilirlik standartlar\u0131na uymak istiyorsan\u0131z, Floatkit’i denemenin tam zaman\u0131.<\/p>\n Floatkit ile ilgili akl\u0131n\u0131za tak\u0131labilecek baz\u0131 sorular\u0131 ve cevaplar\u0131n\u0131 a\u015fa\u011f\u0131da bulabilirsiniz:<\/p>\n Floatkit, vanilla JavaScript ile yaz\u0131ld\u0131\u011f\u0131 i\u00e7in herhangi bir JavaScript framework’\u00fcnden (React, Vue, Angular, Svelte vb.) ba\u011f\u0131ms\u0131zd\u0131r. Bu, onu mevcut herhangi bir projeye kolayca entegre edebilece\u011finiz anlam\u0131na gelir. Kendi reaktif yap\u0131s\u0131 sayesinde, bu framework’lerin veri ak\u0131\u015f\u0131 ve bile\u015fen y\u00f6netimi prensipleriyle uyumlu bir \u015fekilde \u00e7al\u0131\u015fabilir.<\/p>\n<\/li>\n Floatkit, hafif ve mod\u00fcler bir yap\u0131da tasarlanm\u0131\u015ft\u0131r. Sadece ihtiyac\u0131n\u0131z olan bile\u015fenleri i\u00e7e aktarman\u0131za olanak tan\u0131yan “tree-shaking” dostu bir yakla\u015f\u0131ma sahiptir. Ayr\u0131ca, animasyonlar i\u00e7in donan\u0131m h\u0131zland\u0131rma ve ak\u0131ll\u0131 yeniden \u00e7izim teknikleri kullanarak y\u00fcksek performans ve ak\u0131c\u0131 kullan\u0131c\u0131 deneyimi sunar.<\/p>\n<\/li>\n Floatkit, WCAG standartlar\u0131n\u0131 temel alarak geli\u015ftirilmi\u015ftir. Bile\u015fenleri otomatik olarak ARIA niteliklerini ekler, klavye navigasyonunu ve odak y\u00f6netimini sa\u011flar. Bu sayede, ekran okuyucular ve di\u011fer yard\u0131mc\u0131 teknolojilerle uyumlu, eri\u015filebilir web uygulamalar\u0131 olu\u015fturmay\u0131 geli\u015ftiriciler i\u00e7in \u00e7ok daha kolay hale getirir.<\/p>\n<\/li>\n Floatkit, kapsaml\u0131 \u00f6zelle\u015ftirme se\u00e7enekleri sunar. CSS de\u011fi\u015fkenleri (CSS variables) arac\u0131l\u0131\u011f\u0131yla global tema de\u011fi\u015fiklikleri yapabilir, SASS\/SCSS kullan\u0131yorsan\u0131z de\u011fi\u015fkenleri ge\u00e7ersiz k\u0131larak (override) daha derinlemesine stil kontrol\u00fc sa\u011flayabilirsiniz. Ayr\u0131ca, \u00f6zel CSS s\u0131n\u0131flar\u0131 ekleyerek veya bile\u015fenlerin kendi yap\u0131s\u0131na m\u00fcdahale ederek istedi\u011finiz g\u00f6rsel de\u011fi\u015fiklikleri yapabilirsiniz.<\/p>\n<\/li>\n Floatkit, aktif bir geli\u015ftirme s\u00fcrecindedir ve s\u00fcrekli olarak yeni \u00f6zellikler eklenmektedir. A\u00e7\u0131k kaynakl\u0131 bir proje olmas\u0131 beklenmektedir, bu da geli\u015ftirici toplulu\u011funun katk\u0131lar\u0131yla daha da b\u00fcy\u00fcyece\u011fi anlam\u0131na gelir. Dok\u00fcmantasyon ve \u00f6rnekler s\u00fcrekli g\u00fcncellenmekte, topluluk forumlar\u0131 ve destek kanallar\u0131 arac\u0131l\u0131\u011f\u0131yla geli\u015ftiricilere yard\u0131mc\u0131 olunmaktad\u0131r.<\/p>\n<\/li>\n<\/ol>\n #Floatkit #WebGeli\u015ftirme #Kullan\u0131c\u0131Aray\u00fcz\u00fc #Frontend #JavaScript<\/p>\n","protected":false},"excerpt":{"rendered":"Web geli\u015ftirme d\u00fcnyas\u0131nda s\u00fcrekli yenilikler ve ara\u00e7lar ortaya \u00e7\u0131karken, geli\u015ftiricilerin en b\u00fcy\u00fck arzusu, hem h\u0131zl\u0131 hem de performansl\u0131 uygulamalar in\u015fa etmek.","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-42024","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\ndaha az kodla daha fazlas\u0131n\u0131 yapmak<\/q> \u00fczerine kuruludur. Bu, geli\u015ftiricilerin karma\u015f\u0131k etkile\u015fimleri ve animasyonlar\u0131 bile anla\u015f\u0131l\u0131r ve s\u00fcrd\u00fcr\u00fclebilir bir kod taban\u0131yla hayata ge\u00e7irmelerini sa\u011flar. Floatkit, \u00f6zellikle performans, eri\u015filebilirlik ve geli\u015ftirici deneyimi (developer experience) konular\u0131nda \u00f6d\u00fcn vermeden, h\u0131zl\u0131 ve esnek \u00e7\u00f6z\u00fcmler sunmay\u0131 ama\u00e7lar. \u0130\u00e7erdi\u011fi \u00f6nceden tan\u0131mlanm\u0131\u015f ancak tamamen \u00f6zelle\u015ftirilebilir bile\u015fenler sayesinde, her t\u00fcrl\u00fc proje ihtiyac\u0131na uyum sa\u011flayabilir.<\/p>\n
Geleneksel Yakla\u015f\u0131mlar\u0131n Zorluklar\u0131 ve Floatkit’in \u00c7\u00f6z\u00fcmleri<\/h3>\n
Web Geli\u015ftirmede Kullan\u0131c\u0131 Deneyimi ve Eri\u015filebilirli\u011fin \u00d6nemi<\/h3>\n
Floatkit’in Temel \u00d6zellikleri ve Mimari Yap\u0131s\u0131<\/h2>\n
Mod\u00fcler Yap\u0131 ve Hafif Tasar\u0131m<\/h3>\n
Reaktif Bile\u015fenler ve Veri Ak\u0131\u015f\u0131 Y\u00f6netimi<\/h3>\n
\u00c7apraz Taray\u0131c\u0131 Uyumlulu\u011fu ve Performans Optimizasyonu<\/h3>\n
\n
Eri\u015filebilirlik (Accessibility) Odakl\u0131 Geli\u015ftirme<\/h3>\n
\n
role=\"dialog\"<\/code>, aria-modal=\"true\"<\/code>, aria-labelledby\"<\/code>) otomatik olarak ekler.<\/li>\nFloatkit ile \u0130lk Ad\u0131mlar: Kurulum ve Basit Bir Uygulama<\/h2>\n
Floatkit Ortam Kurulumu<\/h3>\n
\n# npm ile kurulum\nnpm install floatkit\n\n# veya Yarn ile kurulum\nyarn add floatkit\n <\/code><\/pre>\n<\/p><\/div>\nnode_modules<\/code> dizinine indirecek ve package.json<\/code> dosyan\u0131za ba\u011f\u0131ml\u0131l\u0131k olarak ekleyecektir. Kurulum tamamland\u0131ktan sonra, Floatkit bile\u015fenlerini kullanmaya haz\u0131rs\u0131n\u0131z demektir. Genellikle, modern JavaScript projelerinde (\u00f6rne\u011fin React, Vue, Angular veya sadece vanilla JavaScript ile bir build arac\u0131 kullanarak) Floatkit’i mod\u00fcl olarak i\u00e7e aktarman\u0131z gerekecektir. Bir JavaScript dosyan\u0131zda (\u00f6rne\u011fin main.js<\/code> veya app.js<\/code>) a\u015fa\u011f\u0131daki gibi Floatkit’i i\u00e7e aktarabilirsiniz:<\/p>\n\nimport { Modal, Tooltip, Dropdown } from 'floatkit';\n\n\/\/ Art\u0131k Modal, Tooltip ve Dropdown bile\u015fenlerini kullanabilirsiniz.\n <\/code><\/pre>\n<\/p><\/div>\n\n\/\/ CSS dosyas\u0131n\u0131 i\u00e7e aktarma\nimport 'floatkit\/dist\/floatkit.min.css';\n <\/code><\/pre>\n<\/p><\/div>\n\u0130lk Floatkit Bile\u015feninizi Olu\u015fturma: Bir Modal \u00d6rne\u011fi<\/h3>\n
div<\/code> elementine ihtiyac\u0131m\u0131z var:<\/p>\n\n<!-- Modal\u0131 a\u00e7acak d\u00fc\u011fme -->\n<button id=\"openModalBtn\">Modal\u0131 A\u00e7<\/button>\n\n<!-- Modal i\u00e7eri\u011fi -->\n<div id=\"myModalContent\" style=\"display:none;\">\n <h3>Floatkit Modal Ba\u015fl\u0131\u011f\u0131<\/h3>\n <p>Merhaba Floatkit d\u00fcnyas\u0131! Bu ilk modal penceremiz.<\/p>\n <button id=\"closeModalBtn\">Kapat<\/button>\n<\/div>\n <\/code><\/pre>\n<\/p><\/div>\nModal<\/code> bile\u015fenini i\u00e7e aktaracak ve bu HTML elementlerini kullanarak bir modal \u00f6rne\u011fi olu\u015fturaca\u011f\u0131z. Modal\u0131n i\u00e7eri\u011fi ba\u015flang\u0131\u00e7ta gizli oldu\u011fu i\u00e7in display:none;<\/code> stilini ekledik, Floatkit modal\u0131 a\u00e7t\u0131\u011f\u0131nda bu stili y\u00f6netecek ve g\u00f6r\u00fcn\u00fcr hale getirecektir.<\/p>\n\nimport { Modal } from 'floatkit';\nimport 'floatkit\/dist\/floatkit.min.css'; \/\/ CSS'i de dahil edelim\n\ndocument.addEventListener('DOMContentLoaded', () => {\n const openButton = document.getElementById('openModalBtn');\n const closeButton = document.getElementById('closeModalBtn');\n const modalContent = document.getElementById('myModalContent');\n\n \/\/ Floatkit Modal \u00f6rne\u011fini olu\u015fturuyoruz\n const myModal = new Modal(modalContent, {\n \/\/ Se\u00e7enekler (opsiyonel)\n \/\/ \u00d6rne\u011fin, d\u0131\u015far\u0131 t\u0131klayarak kapatma\n closeOnOverlayClick: true,\n \/\/ Esc tu\u015fu ile kapatma\n closeOnEscape: true,\n \/\/ Modal a\u00e7\u0131ld\u0131\u011f\u0131nda i\u00e7eri\u011fi g\u00f6r\u00fcn\u00fcr yap\n onOpen: () => {\n modalContent.style.display = 'block';\n },\n \/\/ Modal kapand\u0131\u011f\u0131nda i\u00e7eri\u011fi gizle\n onClose: () => {\n modalContent.style.display = 'none';\n }\n });\n\n \/\/ D\u00fc\u011fmelere olay dinleyicileri ekleyelim\n openButton.addEventListener('click', () => {\n myModal.open(); \/\/ Modal\u0131 a\u00e7\n });\n\n closeButton.addEventListener('click', () => {\n myModal.close(); \/\/ Modal\u0131 kapat\n });\n});\n <\/code><\/pre>\n<\/p><\/div>\nopenModalBtn<\/code> d\u00fc\u011fmesine t\u0131kland\u0131\u011f\u0131nda myModalContent<\/code> div’ini bir Floatkit modal\u0131 olarak a\u00e7ar. closeModalBtn<\/code> d\u00fc\u011fmesine bas\u0131ld\u0131\u011f\u0131nda ise modal kapan\u0131r. Floatkit, modal\u0131n konumland\u0131r\u0131lmas\u0131, arkaplan karartmas\u0131 (overlay) ve eri\u015filebilirlik \u00f6zelliklerini otomatik olarak y\u00f6netir. onOpen<\/code> ve onClose<\/code> geri \u00e7a\u011f\u0131r\u0131m fonksiyonlar\u0131 (callbacks), modal\u0131n a\u00e7\u0131l\u0131\u015f ve kapan\u0131\u015f anlar\u0131nda \u00f6zel i\u015flemler yapman\u0131za olanak tan\u0131r. G\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi, sadece birka\u00e7 sat\u0131r JavaScript kodu ile tam i\u015flevsel ve eri\u015filebilir bir modal olu\u015fturmak Floatkit ile olduk\u00e7a kolayd\u0131r. Bu basit \u00f6rnek, Floatkit’in bile\u015fen tabanl\u0131 yakla\u015f\u0131m\u0131n\u0131n ve kullan\u0131m kolayl\u0131\u011f\u0131n\u0131n harika bir g\u00f6stergesidir.<\/p>\nFloatkit ile Responsive Tasar\u0131m Nas\u0131l Yap\u0131l\u0131r?<\/h3>\n
\n
rem<\/code>, em<\/code>, vw<\/code>, vh<\/code> gibi g\u00f6receli birimlerin kullan\u0131lmas\u0131, bile\u015fenlerin taray\u0131c\u0131 veya cihaz ayarlar\u0131na g\u00f6re \u00f6l\u00e7eklenmesini sa\u011flar.<\/li>\n\n\/* \u00d6rnek CSS: K\u00fc\u00e7\u00fck ekranlarda modal\u0131 tam ekran yap *\/\n@media (max-width: 768px) {\n .floatkit-modal-content { \/* Floatkit'in modal i\u00e7eri\u011fi i\u00e7in varsay\u0131lan s\u0131n\u0131f\u0131 *\/\n width: 100vw !important;\n height: 100vh !important;\n margin: 0 !important;\n border-radius: 0 !important;\n }\n}\n <\/code><\/pre>\n<\/p><\/div>\nFloatkit’in G\u00fcc\u00fcn\u00fc Ke\u015ffetmek: \u0130leri Seviye Kullan\u0131m Senaryolar\u0131<\/h2>\n
Dinamik \u0130\u00e7erik Y\u00f6netimi ve API Entegrasyonlar\u0131<\/h3>\n
\nimport { Modal } from 'floatkit';\nimport 'floatkit\/dist\/floatkit.min.css';\n\ndocument.addEventListener('DOMContentLoaded', () => {\n const openProductModalBtn = document.getElementById('openProductModal');\n const productModalContent = document.getElementById('productDetailModal');\n const productTitle = document.getElementById('productTitle');\n const productDescription = document.getElementById('productDescription');\n const productPrice = document.getElementById('productPrice');\n\n const productModal = new Modal(productModalContent, {\n closeOnOverlayClick: true,\n closeOnEscape: true,\n onOpen: () => productModalContent.style.display = 'block',\n onClose: () => productModalContent.style.display = 'none'\n });\n\n openProductModalBtn.addEventListener('click', async () => {\n productTitle.textContent = '\u00dcr\u00fcn Y\u00fckleniyor...';\n productDescription.textContent = 'L\u00fctfen bekleyiniz.';\n productPrice.textContent = '';\n productModal.open(); \/\/ Modal\u0131 a\u00e7, y\u00fckleme mesaj\u0131n\u0131 g\u00f6ster\n\n try {\n \/\/ \u00d6rnek bir API \u00e7a\u011fr\u0131s\u0131\n const response = await fetch('https:\/\/api.example.com\/products\/123');\n const productData = await response.json();\n\n \/\/ Veriler geldikten sonra modal i\u00e7eri\u011fini g\u00fcncelle\n productTitle.textContent = productData.name;\n productDescription.textContent = productData.description;\n productPrice.textContent = Fiyat: ${productData.price} TL<\/code>;\n\n } catch (error) {\n console.error('\u00dcr\u00fcn detaylar\u0131 y\u00fcklenirken hata olu\u015ftu:', error);\n productTitle.textContent = 'Hata!';\n productDescription.textContent = '\u00dcr\u00fcn detaylar\u0131 y\u00fcklenemedi.';\n productPrice.textContent = '';\n }\n });\n});\n <\/code><\/pre>\n<\/p><\/div>\n\u00d6zelle\u015ftirme ve Tema Olu\u015fturma<\/h3>\n
\n\/* custom-theme.css *\/\n:root {\n --floatkit-primary-color: #007bff; \/* Ana renk *\/\n --floatkit-secondary-color: #6c757d; \/* \u0130kincil renk *\/\n --floatkit-border-radius: 8px; \/* K\u00f6\u015fe yuvarlakl\u0131\u011f\u0131 *\/\n --floatkit-modal-background: #ffffff; \/* Modal arkaplan rengi *\/\n --floatkit-overlay-background: rgba(0, 0, 0, 0.6); \/* Overlay rengi *\/\n}\n <\/code><\/pre>\n<\/p><\/div>\n_variables.scss<\/code> dosyan\u0131zda ge\u00e7ersiz k\u0131larak (override), derleme (compilation) an\u0131nda Floatkit’in stillerini tamamen kontrol edebilirsiniz. Bu, daha karma\u015f\u0131k tasar\u0131m sistemleri i\u00e7in idealdir.<\/p>\nPerformans \u0130pu\u00e7lar\u0131 ve En \u0130yi Uygulamalar<\/h3>\n
\n
Modal<\/code> ve Tooltip<\/code> kullan\u0131yorsan\u0131z, t\u00fcm k\u00fct\u00fcphaneyi de\u011fil, yaln\u0131zca bu iki bile\u015feni i\u00e7e aktar\u0131n: import { Modal, Tooltip } from 'floatkit';<\/code><\/li>\ntransform<\/code> ve opacity<\/code> gibi \u00f6zelliklere odaklan\u0131n. left<\/code>, top<\/code>, width<\/code>, height<\/code> gibi \u00f6zelliklerin animasyonu genellikle daha pahal\u0131d\u0131r.<\/li>\nVaka Analizi: B\u00fcy\u00fck Bir E-Ticaret Sitesi \u0130\u00e7in Floatkit Entegrasyonu<\/h3>\n
\n
\n
Sonu\u00e7: Floatkit ile Gelece\u011fin Webini \u0130n\u015fa Edin<\/h2>\n
S\u0131k\u00e7a Sorulan Sorular<\/h3>\n
\n