yoklateknik mülakat
GelişimGeçmiş

Frontend Senior Mülakat Soruları

1917 doğrulanmış Frontend Senior 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 3
Bir kullanıcı formu AJAX ile gönderdikten sonra bir <div> 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?
  • aMesajı aria-live="polite" ile işaretli bir konteynere basmak; böylece güncellemeleri duyurulur✓
  • bMesajı bir alert() dialog'unun içinde göstermek; böylece tarayıcı onu her kullanıcı için sesli okur
  • cMesaj elementine role="button" eklemek; böylece ekran okuyucular onu etkileşimli kabul eder
  • dMesaj her gösterildiğinde klavye focus'unu sayfanın <h1> elementine taşımak
Açıklama: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.
AccessibilityZorluk 3
<h2 id="billing">Billing address</h2>
<section aria-labelledby="billing">
  ...
</section>

Buradaki aria-labelledby="billing" ne yapar?
  • a<section>'ı, id'si billing olan elementin metnini kullanarak isimlendirir✓
  • bBaşlığın metnini section'a kopyalar; böylece <h2> ardından kaldırılabilir
  • c<h2>'yi ekran okuyuculardan gizler, çünkü section zaten ona referans veriyor
  • dSection'ı başlığa yalnızca stil için bağlar, assistive tech üzerinde etkisi yoktur
Açıklama: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.
AccessibilityZorluk 3
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?
  • aKlavye erişimini ihlal eder; çözüm her bir zorunlu label'a tabindex eklemektir
  • bHeading sırasını ihlal eder; çözüm zorunlu label'ları daha üst bir heading seviyesine sarmaktır
  • cAnlamı iletmek için yalnızca renge dayanır; 'zorunlu' ya da '*' gibi bir metin/sembol ipucu ekle✓
  • dKontrast kuralını ihlal eder; çözüm çok daha fazla öne çıksın diye kırmızıyı parlaklaştırmaktır
Açıklama: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.
AccessibilityZorluk 3
Bir <div>'den, tıklandığında on/off 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?
  • aYalnızca on ve off durumları için, değişimin görünür kalmasını sağlayan ayrı bir arka plan rengi
  • bYalnızca bir aria-label, çünkü kontrolü isimlendirmek assistive tech'in onu çalıştırması için yeterlidir
  • cYalnızca tabindex="0", çünkü bir kez focus alabildiğinde gerisini tarayıcı halleder
  • dBir role (örn. switch), klavye ile çalıştırma ve senkron tutulan aria-checked gibi bir state✓
Açıklama: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.
AccessibilityZorluk 3
<button role="button" aria-hidden="true" onclick="submit()">
  Submit
</button>

Bu native button üzerindeki ARIA'nın nesi yanlış?
  • arole="button" her <button>'da zorunludur ama buradaki aria-hidden "false" olmalıydı
  • brole="button" gereksizdir ve aria-hidden="true" focus alabilen bir kontrolü ekran okuyuculardan gizler✓
  • cHiçbir şey yanlış değil; butonun doğru duyurulması için iki attribute da birlikte gereklidir
  • daria-hidden sorun değil ama role="button" native role ile çakışır ve tıklamayı devre dışı bırakır
Açıklama:Bir <button>'ı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.
Css LayoutZorluk 3
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  height: 400px;
}

Bu container'ın içindeki çocuklar nasıl konumlanır?
  • aYatayda ortalanır ve üst kenara hizalanır
  • bHem yatayda hem dikeyde ortalanır
  • cSol kenara hizalanır ve üstten aşağı dizilir
  • dDikeyde ortalanır ve sol kenara hizalanır✓
Açıklama: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.

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