yoklateknik mülakat
GelişimGeçmiş

Frontend Mid Mülakat Soruları

2466 doğrulanmış Frontend Mid mülakat sorusu — cevaplarıyla çöz, açıklamalarıyla öğren, gerçek simülasyonda kendini test et.

Gerçek simülasyonu dene →

Örnek sorular

AccessibilityZorluk 2
<!-- A -->
<div class="btn" onclick="save()">Save</div>

<!-- B -->
<button class="btn" onclick="save()">Save</button>

İkisi de fareyle tıklandığında save() çağırıyor. Hangi ifade doğrudur?
  • aEşdeğerdirler, çünkü onclick handler'ı her iki element için de aynı şekilde tetiklenir
  • bA daha iyidir, çünkü bir <div>, <button>'a göre daha esnek şekillendirilebilir
  • cİkisi de erişilemez, çünkü inline onclick handler'ları ekran okuyucular tarafından tamamen yok sayılır
  • dYalnızca B Tab ile erişilip klavyeyle çalıştırılabilir; A'nın buna denk olması için ekstra iş gerekir✓
Açıklama:<button> focus alır ve Enter/Space'e kutudan çıktığı gibi yanıt verir; böylece klavye ve ekran okuyucu kullanıcıları onu kullanabilir. <div> ise tabindex, role ve key handler eklenmedikçe yalnızca fare tıklamasına yanıt verir — inline onclick'in kendisi yok sayılmaz (c), sadece klavye desteği eklemez.
AccessibilityZorluk 2
E-posta adresi için bir text input'un var; yanında ayrı bir <span> içinde görünür 'Email' yazısı duruyor. Ekran okuyucu kullanıcısı alana tab'ladığında yalnızca 'edit text' duyuyor, label yok. Doğru düzeltme nedir?
  • a<span>'e bir title attribute'u ekleyip metninin alanla birlikte duyurulmasını sağlamak
  • bfor değeri input'un id'siyle eşleşen bir <label for="..."> kullanmak✓
  • cInput'u bir <div role="label"> içine sarıp tarayıcının yakındaki metni ona bağlamasını sağlamak
  • dInput'a placeholder="Email" koyup amacının kullanıcıya duyurulmasını sağlamak
Açıklama:for değeri input'un id'siyle eşleşen bir <label> (ya da input'u saran bir <label>) programatik bir bağ kurar; böylece alan 'Email' olarak duyurulur. placeholder (d) güvenilir bir label değildir — yazmaya başlayınca kaybolur ve tutarsız duyurulur — ve role="label" diye bir şey yoktur (c).
AccessibilityZorluk 2
Bir sayfa, tamamen görsel süs amaçlı küçük bir dekoratif kıvrım görseli kullanıyor; hiçbir bilgi taşımıyor. Bu <img> erişilebilirlik için nasıl işaretlenmeli?
  • aalt="iki bölüm arasındaki dekoratif kıvrım ayıracı" gibi tanımlayıcı bir alt verilmeli
  • balt attribute'u tamamen kaldırılmalı ki tarayıcı nasıl duyuracağına kendisi karar versin
  • crole="img" ve kıvrımı ekran okuyucu kullanıcılarına tarif eden bir aria-label eklenmeli
  • dBoş alt="" verilmeli ki assistive technology onu dekoratif kabul edip atlasın✓
Açıklama:Boş alt="", ekran okuyuculara görselin dekoratif olduğunu ve yok sayılabileceğini söyler; gürültüyü önler. Anlamsız bir süsü tarif etmek (a) kalabalık yaratır; alt'ı tamamen kaldırmak (b) ise birçok ekran okuyucunun görseli atlamak yerine dosya adını okumasına yol açar.
AccessibilityZorluk 2
'No ARIA is better than bad ARIA' ilkesi pratikte ne anlama gelir?
  • aARIA'dan tamamen kaçınmalısın, çünkü native HTML zaten olası her widget'ı ifade edebilir
  • bYanlış ARIA native semantiği ezip kullanıcıyı yanıltabilir; bu yüzden hatalı ARIA hiç yoktan kötüdür✓
  • cARIA attribute'ları sayfayı yavaşlatır; hepsini kaldırmak her zaman performansı iyileştirir
  • dARIA attribute'larını production'a yalnızca senior developer'ların eklemesine izin verilmeli
Açıklama:Yanlış ARIA (hatalı kullanılmış bir role, güncellenmemiş bir state) bir elementin gerçek semantiğini ezer ve assistive tech'e aktif olarak yanlış bilgi verir; bu, doğru native semantiği olduğu gibi bırakmaktan kötüdür. ARIA'nın hiç gerekmediği (a) anlamına gelmez — doğru kullan ve önce native HTML'i tercih et demektir.
AccessibilityZorluk 2
Bir developer, onclick handler ve biraz CSS ekleyerek bir <div>'i tıklanabilir bir kart'a dönüştürüyor. Fare kullanıcıları tıklayabiliyor ama klavye kullanıcıları ona ne erişebiliyor ne de çalıştırabiliyor. Hangi eklemeler onu klavyeyle erişilebilir yapar?
  • atabindex="0", uygun bir role ve Enter/Space için bir keydown handler eklemek✓
  • btabindex="-1" eklemek; böylece kart bir link gibi normal Tab sırasına girer
  • cCSS'e cursor: pointer eklemek; böylece tarayıcı elementi etkileşimli kabul etmeye başlar
  • daria-label eklemek; böylece ekran okuyucular kartı bulup ardından çalıştırabilir
Açıklama:Genel bir <div>'in bir kontrol gibi davranması için üç şey gerekir: focus alabilmek (tabindex="0"), doğru duyurulması için bir role ve Enter/Space için tuş işleme. tabindex="-1" (b) elementi yalnızca script ile focus edilebilir yapar, Tab ile değil; cursor: pointer (c) tamamen görseldir; aria-label (d) isim verir ama focus alınır ya da çalıştırılır yapmaz.
AccessibilityZorluk 2
:focus {
  outline: none;
}

Bir stylesheet, 'çirkin' focus ring'inden kurtulmak için bu global kuralı içeriyor. Bu neden bir erişilebilirlik problemidir?
  • aYan etki olarak sayfadaki her etkileşimli elementte mouse hover stillerini de devre dışı bırakır
  • bYalnızca link'lere uygulanır; böylece button ve input'lar tutarsız bir focus stiliyle kalır
  • coutline şekillendirilemez, bu yüzden bu kural zaten her modern tarayıcıda sessizce yok sayılır
  • dKlavye kullanıcıları, o an hangi elementin focus'ta olduğunu gösteren görünür göstergeyi kaybeder✓
Açıklama:Focus outline'ı, klavye kullanıcılarının sayfada nerede olduklarını gördükleri şeydir; onu global olarak kaldırmak onları kör gezinmeye bırakır. Varsayılan ring kötü görünüyorsa, kaldırmak yerine görünür bir custom stille (outline ya da box-shadow) değiştir — tamamen şekillendirilebilir, yani (c) yanlıştır.

Konular

Accessibility 75Angular Change Detection 75Angular Components Lifecycle 75Angular Dependency Injection 75Angular Directives Pipes 75Angular Router Forms 75Angular Testing Performance 75Css Layout 75Dom Browser Apis 75Javascript Async Concurrency 75Javascript Language 75Javascript Memory Performance 75Javascript Modules Bundling 75Javascript Prototypes Oop 75Javascript Runtime Apis 75Javascript Testing Tooling 75Performance 75React Components Jsx 75React Context State 75React Effects Lifecycle 75React Forms Suspense 75React Hooks State 75React Rendering Performance 75Rendering Reactivity 75State Management 75Testing 75Typescript Advanced Types 75Typescript Generics 75Typescript Modules Declarations 75Typescript Narrowing Control Flow 75Typescript Tooling Config 75Typescript Type Fundamentals 75Vue Components Props 75Vue Composition Api 75Vue Directives Templates 75Vue Performance Testing 75Vue Reactivity System 75Vue Router State Management 75Web Security 75

Uzmanlığa göre

Angular 450JavaScript 450React 450TypeScript 450Vue 450

Kıdeme göre

Frontend JuniorFrontend MidFrontend Senior

Diğer alanlar

BackendFullstackDevOps / CloudAI EngineerVeritabanıMobilGüvenlikQA / Test OtomasyonuData EngineerOyun GeliştirmeML Engineer

2925 soruluk Frontend bankasında kendini sına.

Mülakata başla