[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"me":3,"catalog:tr:frontend\u002Fsenior":4,"config":235},null,{"field_key":5,"field_name":6,"seniority":7,"topic_key":8,"topic_name":8,"spec_key":8,"spec_name":8,"locale":9,"cell_total":10,"field_total":11,"seniorities":12,"topics":15,"specs":134,"samples":151},"frontend","Frontend","senior","","tr",1917,2925,[13,14,7],"junior","mid",[16,20,23,26,29,32,35,38,41,44,47,50,53,56,59,62,65,68,71,74,77,80,83,86,89,92,95,98,101,104,107,110,113,116,119,122,125,128,131],{"key":17,"name":18,"count":19},"accessibility","Accessibility",75,{"key":21,"name":22,"count":19},"angular-change-detection","Angular Change Detection",{"key":24,"name":25,"count":19},"angular-components-lifecycle","Angular Components Lifecycle",{"key":27,"name":28,"count":19},"angular-dependency-injection","Angular Dependency Injection",{"key":30,"name":31,"count":19},"angular-directives-pipes","Angular Directives Pipes",{"key":33,"name":34,"count":19},"angular-router-forms","Angular Router Forms",{"key":36,"name":37,"count":19},"angular-testing-performance","Angular Testing Performance",{"key":39,"name":40,"count":19},"css-layout","Css Layout",{"key":42,"name":43,"count":19},"dom-browser-apis","Dom Browser Apis",{"key":45,"name":46,"count":19},"javascript-async-concurrency","Javascript Async Concurrency",{"key":48,"name":49,"count":19},"javascript-language","Javascript Language",{"key":51,"name":52,"count":19},"javascript-memory-performance","Javascript Memory Performance",{"key":54,"name":55,"count":19},"javascript-modules-bundling","Javascript Modules Bundling",{"key":57,"name":58,"count":19},"javascript-prototypes-oop","Javascript Prototypes Oop",{"key":60,"name":61,"count":19},"javascript-runtime-apis","Javascript Runtime Apis",{"key":63,"name":64,"count":19},"javascript-testing-tooling","Javascript Testing Tooling",{"key":66,"name":67,"count":19},"performance","Performance",{"key":69,"name":70,"count":19},"react-components-jsx","React Components Jsx",{"key":72,"name":73,"count":19},"react-context-state","React Context State",{"key":75,"name":76,"count":19},"react-effects-lifecycle","React Effects Lifecycle",{"key":78,"name":79,"count":19},"react-forms-suspense","React Forms Suspense",{"key":81,"name":82,"count":19},"react-hooks-state","React Hooks State",{"key":84,"name":85,"count":19},"react-rendering-performance","React Rendering Performance",{"key":87,"name":88,"count":19},"rendering-reactivity","Rendering Reactivity",{"key":90,"name":91,"count":19},"state-management","State Management",{"key":93,"name":94,"count":19},"testing","Testing",{"key":96,"name":97,"count":19},"typescript-advanced-types","Typescript Advanced Types",{"key":99,"name":100,"count":19},"typescript-generics","Typescript Generics",{"key":102,"name":103,"count":19},"typescript-modules-declarations","Typescript Modules Declarations",{"key":105,"name":106,"count":19},"typescript-narrowing-control-flow","Typescript Narrowing Control Flow",{"key":108,"name":109,"count":19},"typescript-tooling-config","Typescript Tooling Config",{"key":111,"name":112,"count":19},"typescript-type-fundamentals","Typescript Type Fundamentals",{"key":114,"name":115,"count":19},"vue-components-props","Vue Components Props",{"key":117,"name":118,"count":19},"vue-composition-api","Vue Composition Api",{"key":120,"name":121,"count":19},"vue-directives-templates","Vue Directives Templates",{"key":123,"name":124,"count":19},"vue-performance-testing","Vue Performance Testing",{"key":126,"name":127,"count":19},"vue-reactivity-system","Vue Reactivity System",{"key":129,"name":130,"count":19},"vue-router-state-management","Vue Router State Management",{"key":132,"name":133,"count":19},"web-security","Web Security",[135,139,142,145,148],{"key":136,"name":137,"count":138},"angular","Angular",450,{"key":140,"name":141,"count":138},"javascript","JavaScript",{"key":143,"name":144,"count":138},"react","React",{"key":146,"name":147,"count":138},"typescript","TypeScript",{"key":149,"name":150,"count":138},"vue","Vue",[152,170,183,196,209,222],{"id":153,"topic":18,"difficulty":154,"body":155,"options":156,"correct_key":158,"explanation":169},"019f56bb-ba45-7f0c-bc99-3046e77cb9db",3,"Bir kullanıcı formu AJAX ile gönderdikten sonra bir `\u003Cdiv>` içinde 'Başarıyla kaydedildi' mesajı beliriyor. Gören kullanıcılar onu görüyor ama ekran okuyucu kullanıcıları hiçbir duyuru almıyor. Standart erişilebilir yaklaşım nedir?",[157,160,163,166],{"key":158,"text":159},"a","Mesajı `aria-live=\"polite\"` ile işaretli bir konteynere basmak; böylece güncellemeleri duyurulur",{"key":161,"text":162},"b","Mesajı bir `alert()` dialog'unun içinde göstermek; böylece tarayıcı onu her kullanıcı için sesli okur",{"key":164,"text":165},"c","Mesaj elementine `role=\"button\"` eklemek; böylece ekran okuyucular onu etkileşimli kabul eder",{"key":167,"text":168},"d","Mesaj her gösterildiğinde klavye focus'unu sayfanın `\u003Ch1>` elementine taşımak","Bir `aria-live` bölgesi, assistive tech'e kullanıcı focus'u taşımadan dinamik değişen içeriği duyurmasını söyler; `polite` bir duraklamayı bekler ki araya girmesin. `role=\"button\"` (c) bir durum mesajı için semantik olarak yanlıştır; focus'u h1'e çekmek (d) ise yön kaybettirir ve mesajı okumaz.",{"id":171,"topic":18,"difficulty":154,"body":172,"options":173,"correct_key":158,"explanation":182},"019f56bb-ba49-7720-ac73-65e5c65f0946","```html\n\u003Ch2 id=\"billing\">Billing address\u003C\u002Fh2>\n\u003Csection aria-labelledby=\"billing\">\n  ...\n\u003C\u002Fsection>\n```\nBuradaki `aria-labelledby=\"billing\"` ne yapar?",[174,176,178,180],{"key":158,"text":175},"`\u003Csection>`'ı, `id`'si `billing` olan elementin metnini kullanarak isimlendirir",{"key":161,"text":177},"Başlığın metnini section'a kopyalar; böylece `\u003Ch2>` ardından kaldırılabilir",{"key":164,"text":179},"`\u003Ch2>`'yi ekran okuyuculardan gizler, çünkü section zaten ona referans veriyor",{"key":167,"text":181},"Section'ı başlığa yalnızca stil için bağlar, assistive tech üzerinde etkisi yoktur","`aria-labelledby` başka bir elementin `id`'sine işaret eder ve onun görünür metnini bu elementin accessible name'i olarak yeniden kullanır; böylece section 'Billing address' bölgesi olarak duyurulur. Başlığı çoğaltmaz veya kaldırmaz (b) ve bir stil kancası değildir (d) — tamamen bir isimlendirme ilişkisidir.",{"id":184,"topic":18,"difficulty":154,"body":185,"options":186,"correct_key":164,"explanation":195},"019f56bb-ba4a-7523-8ead-6148aefae691","Bir form zorunlu alanları, başka hiçbir gösterge olmadan label'larını kırmızıya boyayarak işaretliyor. Bu hangi erişilebilirlik ilkesini ihlal eder ve çözümü nedir?",[187,189,191,193],{"key":158,"text":188},"Klavye erişimini ihlal eder; çözüm her bir zorunlu label'a `tabindex` eklemektir",{"key":161,"text":190},"Heading sırasını ihlal eder; çözüm zorunlu label'ları daha üst bir heading seviyesine sarmaktır",{"key":164,"text":192},"Anlamı iletmek için yalnızca renge dayanır; 'zorunlu' ya da '*' gibi bir metin\u002Fsembol ipucu ekle",{"key":167,"text":194},"Kontrast kuralını ihlal eder; çözüm çok daha fazla öne çıksın diye kırmızıyı parlaklaştırmaktır","WCAG'nin 'use of color' kuralı, rengin bilgiyi iletmenin tek yolu olmaması gerektiğini söyler; çünkü renk körü ve bazı az gören kullanıcılar onu algılayamaz. Görünür bir işaret (yıldız, 'zorunlu' kelimesi ya da `aria-required`) eklemek bunu düzeltir. Kırmızıyı parlaklaştırmak (d) rengi hâlâ tek ipucu olarak bırakır.",{"id":197,"topic":18,"difficulty":154,"body":198,"options":199,"correct_key":167,"explanation":208},"019f56bb-ba4d-738d-9814-51855eaef998","Bir `\u003Cdiv>`'den, tıklandığında on\u002Foff state'ini değiştiren custom bir toggle switch inşa ediyorsun. Onu tam erişilebilir yapmak için, sadece doğru görünmenin ötesinde neye ihtiyacı var?",[200,202,204,206],{"key":158,"text":201},"Yalnızca on ve off durumları için, değişimin görünür kalmasını sağlayan ayrı bir arka plan rengi",{"key":161,"text":203},"Yalnızca bir `aria-label`, çünkü kontrolü isimlendirmek assistive tech'in onu çalıştırması için yeterlidir",{"key":164,"text":205},"Yalnızca `tabindex=\"0\"`, çünkü bir kez focus alabildiğinde gerisini tarayıcı halleder",{"key":167,"text":207},"Bir role (örn. `switch`), klavye ile çalıştırma ve senkron tutulan `aria-checked` gibi bir state","Custom bir widget, native bir kontrolün bedava verdiği her şeyi yeniden üretmelidir: doğru duyurulması için bir role, klavyeden çalışması için focus alabilirlik ve tuş işleme, ve toggle oldukça güncellenen bir state (`aria-checked`). Tek başına focus (c) ya da tek başına isim (b), assistive-tech kullanıcıları için onu çalıştırılamaz ya da duyurulmaz bırakır.",{"id":210,"topic":18,"difficulty":154,"body":211,"options":212,"correct_key":161,"explanation":221},"019f56bb-ba4d-7b1e-bfe0-9f1eff592e03","```html\n\u003Cbutton role=\"button\" aria-hidden=\"true\" onclick=\"submit()\">\n  Submit\n\u003C\u002Fbutton>\n```\nBu native button üzerindeki ARIA'nın nesi yanlış?",[213,215,217,219],{"key":158,"text":214},"`role=\"button\"` her `\u003Cbutton>`'da zorunludur ama buradaki `aria-hidden` `\"false\"` olmalıydı",{"key":161,"text":216},"`role=\"button\"` gereksizdir ve `aria-hidden=\"true\"` focus alabilen bir kontrolü ekran okuyuculardan gizler",{"key":164,"text":218},"Hiçbir şey yanlış değil; butonun doğru duyurulması için iki attribute da birlikte gereklidir",{"key":167,"text":220},"`aria-hidden` sorun değil ama `role=\"button\"` native role ile çakışır ve tıklamayı devre dışı bırakır","Bir `\u003Cbutton>`'ın zaten örtük bir button role'ü vardır; bu yüzden `role=\"button\"` anlamsız bir tekrardır. Daha kötüsü, `aria-hidden=\"true\"` hâlâ focus alabilen, çalıştırılabilen bir kontrolü accessibility tree'den kaldırır; böylece klavye kullanıcıları, ekran okuyucuların hiç duyurmadığı bir kontrole erişebilir. Role tıklamayı devre dışı bırakmaz (d) — sadece gereksizdir.",{"id":223,"topic":40,"difficulty":154,"body":224,"options":225,"correct_key":167,"explanation":234},"019f56bb-ba56-70d2-8e00-b323287d4a45","```\n.container {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: flex-start;\n  height: 400px;\n}\n```\nBu container'ın içindeki çocuklar nasıl konumlanır?",[226,228,230,232],{"key":158,"text":227},"Yatayda ortalanır ve üst kenara hizalanır",{"key":161,"text":229},"Hem yatayda hem dikeyde ortalanır",{"key":164,"text":231},"Sol kenara hizalanır ve üstten aşağı dizilir",{"key":167,"text":233},"Dikeyde ortalanır ve sol kenara hizalanır","`flex-direction: column` ile ana eksen yukarıdan aşağı, cross eksen soldan sağa akar. Yani `justify-content: center` çocukları dikeyde ortalar; `align-items: flex-start` ise onları cross eksenin başına (sola) yaslar. Yaygın hata (a) `justify-content`'in her zaman yatay olduğunu varsaymaktır; bu yalnızca varsayılan `row` yönünde doğrudur.",{"fields":236,"seniorities":411,"interview_shapes":412,"locales":417,"oauth":419,"question_count":422,"coach_enabled":423,"jd_match_enabled":423},[237,263,272,288,312,325,344,363,385,392,398,405],{"key":238,"name_tr":239,"name_en":239,"sort":240,"specializations":241},"backend","Backend",1,[242,245,248,251,254,257,260],{"key":243,"name":244,"field":238},"general","Genel",{"key":246,"name":247,"field":238},"go","Go",{"key":249,"name":250,"field":238},"python","Python",{"key":252,"name":253,"field":238},"java","Java",{"key":255,"name":256,"field":238},"csharp","C#\u002F.NET",{"key":258,"name":259,"field":238},"nodejs","Node.js",{"key":261,"name":262,"field":238},"php","PHP",{"key":5,"name_tr":6,"name_en":6,"sort":264,"specializations":265},2,[266,267,268,269,270,271],{"key":243,"name":244,"field":5},{"key":140,"name":141,"field":5},{"key":146,"name":147,"field":5},{"key":143,"name":144,"field":5},{"key":149,"name":150,"field":5},{"key":136,"name":137,"field":5},{"key":273,"name_tr":274,"name_en":274,"sort":154,"specializations":275},"fullstack","Fullstack",[276,277,278,279,280,281,282,283,284,285,286,287],{"key":243,"name":244,"field":273},{"key":246,"name":247,"field":238},{"key":249,"name":250,"field":238},{"key":252,"name":253,"field":238},{"key":255,"name":256,"field":238},{"key":258,"name":259,"field":238},{"key":261,"name":262,"field":238},{"key":140,"name":141,"field":5},{"key":146,"name":147,"field":5},{"key":143,"name":144,"field":5},{"key":149,"name":150,"field":5},{"key":136,"name":137,"field":5},{"key":289,"name_tr":290,"name_en":290,"sort":291,"specializations":292},"devops-cloud","DevOps \u002F Cloud",4,[293,294,297,300,303,306,309],{"key":243,"name":244,"field":289},{"key":295,"name":296,"field":289},"aws","AWS",{"key":298,"name":299,"field":289},"gcp","GCP",{"key":301,"name":302,"field":289},"azure","Azure",{"key":304,"name":305,"field":289},"kubernetes","Kubernetes",{"key":307,"name":308,"field":289},"terraform","Terraform",{"key":310,"name":311,"field":289},"linux","Linux",{"key":313,"name_tr":314,"name_en":314,"sort":315,"specializations":316},"ai-engineer","AI Engineer",5,[317,318,319,322],{"key":243,"name":244,"field":313},{"key":249,"name":250,"field":313},{"key":320,"name":321,"field":313},"llm-rag","LLM\u002FRAG",{"key":323,"name":324,"field":313},"mlops","MLOps",{"key":326,"name_tr":327,"name_en":328,"sort":329,"specializations":330},"database","Veritabanı","Database",6,[331,332,335,338,341],{"key":243,"name":244,"field":326},{"key":333,"name":334,"field":326},"postgresql","PostgreSQL",{"key":336,"name":337,"field":326},"mysql","MySQL",{"key":339,"name":340,"field":326},"mongodb","MongoDB",{"key":342,"name":343,"field":326},"redis","Redis",{"key":345,"name_tr":346,"name_en":347,"sort":348,"specializations":349},"mobile","Mobil","Mobile",7,[350,351,354,357,360],{"key":243,"name":244,"field":345},{"key":352,"name":353,"field":345},"ios-swift","iOS (Swift)",{"key":355,"name":356,"field":345},"android-kotlin","Android (Kotlin)",{"key":358,"name":359,"field":345},"flutter","Flutter",{"key":361,"name":362,"field":345},"react-native","React Native",{"key":364,"name_tr":365,"name_en":366,"sort":367,"specializations":368},"security","Güvenlik","Security",8,[369,370,373,376,379,382],{"key":243,"name":244,"field":364},{"key":371,"name":372,"field":364},"appsec","AppSec",{"key":374,"name":375,"field":364},"offensive-pentest","Offensive \u002F Pentest",{"key":377,"name":378,"field":364},"cloud-security","Cloud Security",{"key":380,"name":381,"field":364},"devsecops","DevSecOps",{"key":383,"name":384,"field":364},"blue-team-incident","Blue Team \u002F Incident",{"key":386,"name_tr":387,"name_en":388,"sort":389,"specializations":390},"qa-test-automation","QA \u002F Test Otomasyonu","QA \u002F Test Automation",9,[391],{"key":243,"name":244,"field":386},{"key":393,"name_tr":394,"name_en":394,"sort":395,"specializations":396},"data-engineer","Data Engineer",10,[397],{"key":243,"name":244,"field":393},{"key":399,"name_tr":400,"name_en":401,"sort":402,"specializations":403},"game-dev","Oyun Geliştirme","Game Development",11,[404],{"key":243,"name":244,"field":399},{"key":406,"name_tr":407,"name_en":407,"sort":408,"specializations":409},"ml-engineer","ML Engineer",12,[410],{"key":243,"name":244,"field":406},[13,14,7],{"junior":413,"mid":415,"senior":416},{"questions":414,"median_sec":3},20,{"questions":414,"median_sec":3},{"questions":414,"median_sec":3},[9,418],"en",[420,421],"google","github",21750,true]