[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"me":3,"catalog:en: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","","en",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,"After a user submits a form via AJAX, a 'Saved successfully' message appears in a `\u003Cdiv>`. Sighted users see it, but screen-reader users get no announcement. What is the standard accessible approach?",[157,160,163,166],{"key":158,"text":159},"a","Render the message into a container marked with `aria-live=\"polite\"` so its updates get announced",{"key":161,"text":162},"b","Show the message inside an `alert()` dialog so the browser reads it aloud for every user",{"key":164,"text":165},"c","Add `role=\"button\"` to the message element so that screen readers treat it as interactive",{"key":167,"text":168},"d","Move keyboard focus to the page's `\u003Ch1>` element each time the message is shown","An `aria-live` region tells assistive tech to announce content that changes dynamically without the user moving focus; `polite` waits for a pause so it does not interrupt. `role=\"button\"` (c) is semantically wrong for a status message, and yanking focus to the h1 (d) is disorienting and does not read the message.",{"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```\nWhat does `aria-labelledby=\"billing\"` do here?",[174,176,178,180],{"key":158,"text":175},"It names the `\u003Csection>` using the text of the element whose `id` is `billing`",{"key":161,"text":177},"It copies the heading's text into the section so that the `\u003Ch2>` can then be removed",{"key":164,"text":179},"It hides the `\u003Ch2>` from screen readers, because the section already references it",{"key":167,"text":181},"It links the section to the heading only for styling, with no effect on assistive tech","`aria-labelledby` points to the `id` of another element and reuses its visible text as this element's accessible name, so the section is announced as the 'Billing address' region. It does not duplicate or remove the heading (b) and is not a styling hook (d) — it is purely a naming relationship.",{"id":184,"topic":18,"difficulty":154,"body":185,"options":186,"correct_key":164,"explanation":195},"019f56bb-ba4a-7523-8ead-6148aefae691","A form marks required fields by coloring their labels red, with no other indicator. Which accessibility principle does this violate, and what is the fix?",[187,189,191,193],{"key":158,"text":188},"It violates keyboard access; the fix is to add `tabindex` to each and every required label",{"key":161,"text":190},"It violates heading order; the fix is to wrap the required labels in a higher heading level",{"key":164,"text":192},"It relies on color alone to convey meaning; add a text or symbol cue such as 'required' or '*'",{"key":167,"text":194},"It violates the contrast rule; the fix is to make the red brighter so that it stands out much more","WCAG's 'use of color' rule says color must not be the only means of conveying information, because color-blind and some low-vision users cannot perceive it; adding a visible marker (an asterisk, the word 'required', or `aria-required`) fixes it. Brightening the red (d) still leaves color as the sole cue.",{"id":197,"topic":18,"difficulty":154,"body":198,"options":199,"correct_key":167,"explanation":208},"019f56bb-ba4d-738d-9814-51855eaef998","You build a custom toggle switch out of a `\u003Cdiv>` that flips an on\u002Foff state on click. To make it fully accessible, what does it need beyond just looking right?",[200,202,204,206],{"key":158,"text":201},"Only a distinct background color for the on and off states so the change stays visible",{"key":161,"text":203},"Only an `aria-label`, since naming the control is enough for assistive tech to operate it",{"key":164,"text":205},"Only `tabindex=\"0\"`, because once it can be focused the browser will handle all the rest",{"key":167,"text":207},"A role (e.g. `switch`), keyboard operation, and a state like `aria-checked` kept in sync","A custom widget must reproduce everything a native control gives for free: a role so it is announced correctly, focusability and key handling so it works from the keyboard, and a state (`aria-checked`) updated as it toggles. Focusability alone (c) or a name alone (b) leaves it unoperable or unannounced for assistive-tech users.",{"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```\nWhat is wrong with the ARIA on this native button?",[213,215,217,219],{"key":158,"text":214},"`role=\"button\"` is required on every `\u003Cbutton>`, but here the `aria-hidden` should be `\"false\"`",{"key":161,"text":216},"`role=\"button\"` is redundant, and `aria-hidden=\"true\"` hides a focusable control from screen readers",{"key":164,"text":218},"Nothing is wrong; both attributes are needed together for the button to be announced correctly",{"key":167,"text":220},"`aria-hidden` is fine, but `role=\"button\"` conflicts with the native role and disables the click","A `\u003Cbutton>` already has an implicit button role, so `role=\"button\"` is pointless duplication; worse, `aria-hidden=\"true\"` removes a still-focusable, operable control from the accessibility tree, so keyboard users can reach a control screen readers never announce. The role does not disable the click (d) — it is simply redundant.",{"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```\nHow are the children positioned inside this container?",[226,228,230,232],{"key":158,"text":227},"Centered horizontally, and aligned to the top edge",{"key":161,"text":229},"Centered both horizontally and vertically",{"key":164,"text":231},"Aligned to the left edge and stacked from the top",{"key":167,"text":233},"Centered vertically, and aligned to the left edge","With `flex-direction: column` the main axis runs top-to-bottom and the cross axis runs left-to-right. So `justify-content: center` centers the children vertically, while `align-items: flex-start` pins them to the (left) start of the cross axis. The common mistake (a) assumes `justify-content` is always horizontal, which is only true for the default `row` direction.",{"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},[418,9],"tr",[420,421],"google","github",21750,true]