Frontend - Senior

Candidate information

Full name

Phone (optional)

Years of experience

CV / Resume Accepted formats: PDF, DOC, DOCX. Maximum 5MB

Knowledge questions

Look at this form: `<form><input type="email" aria-label="Email"><input type="password" aria-describedby="pw-help"></form>`. What accessibility issues does it have?

No accessibility issues; `aria-label` and `aria-describedby` are sufficient ARIA attributes to comply with WCAG 2.1 level AA

Missing visible `<label>` associated with each input (better UX than aria-label alone), and `aria-describedby` references an ID "pw-help" that likely does not exist in the current DOM

Only missing the `required` attribute on both inputs so screen readers announce the fields are mandatory

The problem is using `type="email"` instead of `type="text"` with custom validation, since screen readers do not correctly interpret the email type

In a SPA with multiple dynamic sections, how should headings be structured for proper screen reader navigation?

Use only `<h1>` for all content since it is a single page and screen readers do not distinguish between heading levels in SPAs

Use an independent `<h1>` in each section because each one is an autonomous component with its own semantic context within the application

Maintain logical hierarchy (h1 > h2 > h3), one `<h1>` per page, use `aria-labelledby` on sections, and update the document title when navigating between views

Headings do not matter in modern SPAs; only `aria-live` regions are relevant for navigation with assistive technologies

This grid layout breaks in Safari: `.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .grid > .item { display: subgrid; grid-template-rows: subgrid; }`. What is the problem?

The `gap` property does not work in any version of Safari and requires using `margin` as an alternative in all WebKit browsers

The problem is `repeat(3, 1fr)` which Safari does not support; each column must be declared individually as `1fr 1fr 1fr`

`grid-template-rows: subgrid` is invalid syntax in all current browsers and is not part of the CSS Grid Level 2 specification

`subgrid` has limited support in older Safari and no fallback is provided; need `@supports` with an alternative layout for browsers without support

What is the correct order of CSS specificity cascade and how do `!important` and `@layer` affect it?

inline styles > ID > class/attribute > element. `!important` overrides everything except another `!important` with higher specificity. `@layer` allows controlling cascade order between author-defined style layers

class > ID > element > inline styles; `!important` only has effect within media queries and does not affect styles declared outside them

element > class > ID > inline styles is the correct order; `@layer` completely replaces the functionality of `!important` in modern CSS

All selectors have the same base specificity; only the order of appearance in the CSS file determines which rule applies

This component has a memory leak: `class SearchComponent { constructor() { this.handler = (e) => this.onResize(e); window.addEventListener("resize", this.handler); } onResize(e) { /* updates UI */ } }`. What is the problem and solution?

The event listener on `window` is never removed when the component is destroyed, keeping the reference alive. Solution: implement a `destroy()` method that calls `window.removeEventListener("resize", this.handler)`

The problem is using arrow function for the handler; should use a regular function with `.bind(this)` so the garbage collector can free the reference

The problem is that `onResize` is not properly bound to the instance context and loses the `this` reference when executed as a callback

There is no real memory leak; the JavaScript garbage collector automatically cleans up event listeners when the component goes out of execution scope

This debounce implementation has a bug: `function debounce(fn, delay) { let timer; return function(...args) { timer = setTimeout(() => fn(...args), delay); }; }`. What is missing?

Missing return of the `fn` execution result so the caller can access the return value of the debounced function

Should use `setInterval` instead of `setTimeout` so the function executes periodically while the user continues interacting

It does not cancel the previous timer with `clearTimeout(timer)` before creating a new one, so the function will execute multiple times instead of only the last

Missing proper `this` context preservation; the arrow function inside setTimeout loses the reference to the object that invoked the function

This TypeScript generic does not infer correctly: `function merge<T>(a: T, b: T): T { return { ...a, ...b }; }` called with `merge({ x: 1 }, { y: 2 })`. What is the problem?

The spread operator does not work with generic types in TypeScript because the compiler cannot guarantee T is a spreadable type at compile time

Missing `extends object` as a generic constraint so TypeScript knows T is an object and allows the use of the spread operator

The problem is the function returns `T` instead of `Partial<T>`, causing a type error because spread does not guarantee all properties

Using the same `T` for both parameters, TypeScript infers the intersection and rejects objects with different properties. Solution: use `<T, U>(a: T, b: U): T & U`

How do you correctly implement an accessible modal according to WCAG?

It only needs `role="dialog"` and a visible close button; other ARIA attributes are optional and do not affect the screen reader experience

Just toggling `display: none` and `display: block` to show/hide the modal is enough; the browser automatically manages focus and accessibility

Requires: focus trap (focus cannot leave the modal), `aria-modal="true"`, `role="dialog"`, close with Escape key, return focus to the triggering element on close

Only needs `tabindex="-1"` on the modal container to make it focusable; the rest of accessibility is handled natively by the browser

This tabs component has accessibility errors: `<div class="tabs"><button class="active">Tab 1</button><button>Tab 2</button></div><div class="panel">Content 1</div>`. What is missing?

Missing: `role="tablist"` on container, `role="tab"` on buttons, `aria-selected="true/false"`, `role="tabpanel"` on panels, cross-referenced `aria-controls`/`aria-labelledby`, and arrow key keyboard navigation

Only missing descriptive `aria-label` on each tab button so screen readers can announce the purpose of each tab

Only needs `tabindex="0"` on each button to make them keyboard focusable; HTML buttons are already accessible by default without additional roles

The only problem is using `<button>` instead of `<a href>` for tabs, since links are more accessible than buttons for navigation

How do you optimize SEO for a SPA with client-side rendering?

SEO is not technically possible in SPAs with client-side rendering; the only solution is to completely migrate to static sites generated at build time

Just adding `<meta name="robots" content="index">` in the head is sufficient for search engines to correctly index all dynamic content

Use exclusively hashtag routing (#/) for all routes, since Google can index URL fragments and it is the recommended approach for SPAs

Implement SSR or prerendering, dynamic meta tags with `<head>` management, sitemap.xml, structured data (JSON-LD), and canonical URLs per route

This Angular component has performance issues: `@Component({ template: '<div *ngFor="let item of items">{{transform(item)}}</div>' }) class ListComponent { items$ = this.service.getItems(); ngOnInit() { this.items$.subscribe(i => this.items = i); } transform(item) { /* heavy calculation */ } }`. What are the problems?

Only missing `trackBy` in the `*ngFor` to optimize rendering; the rest of the code follows Angular best practices

The problem is only using `subscribe` instead of the `async` pipe in the template; switching to `async` resolves all performance issues

Only needs to wrap the code in `ngZone.runOutsideAngular()` to prevent Angular from detecting unnecessary changes in the component

Missing `ChangeDetectionStrategy.OnPush`, subscription is not cleaned up (memory leak), and `transform()` runs on every change detection cycle (should be a pure pipe)

What is the difference between Signals and Observables in Angular 17+?

Signals are synchronous, with automatic dependency tracking and fine-grained reactivity (only re-render what is affected). Observables are asynchronous, push-based, ideal for streams and complex events

They are exactly the same with different syntax; Angular maintains both for backward compatibility with earlier framework versions

Signals completely replace RxJS in Angular 17 and all Observable-based APIs have been officially deprecated

Observables are faster than Signals in absolutely all use cases because RxJS is more optimized than the Signals system

This Vue computed does not update: `const user = reactive({ address: { city: "Madrid" } }); const city = computed(() => user.address.city);` then `user.address = { city: "Barcelona" }` works, but issues arise when replacing with non-reactive objects from API responses. Why?

Computed values in Vue never update automatically; they always require a manual trigger via `forceUpdate()` or component re-rendering

If `user.address` is replaced with a plain non-reactive object outside the reactivity system (e.g., from an API response without wrapping), Vue loses tracking. Solution: mutate existing properties or use `Object.assign(user.address, newData)`

The `computed` function does not work with nested objects in Vue 3; it only supports primitive first-level properties of the reactive object

Must use `watch` instead of `computed` for any nested object properties, since computed does not have deep observation capability

What is the difference between `ref`, `reactive`, and `computed` in Vue Composition API?

Three completely equivalent ways to do the same thing, only differing in the syntax used to access and modify reactive values

`ref` is designed exclusively for strings, `reactive` exclusively for objects, and `computed` exclusively for derived numeric values

`ref` wraps any value (access with `.value`), `reactive` makes objects/arrays deeply reactive (no `.value`), `computed` creates cached derived values that recalculate only when dependencies change

`reactive` is the modern improved version of `ref` that completely replaces it; using `ref` in new code is considered an anti-pattern

What strategies reduce LCP (Largest Contentful Paint) with heavy hero images?

Just compressing the image with tools like TinyPNG is sufficient to optimize LCP without needing changes to HTML or loading strategy

Apply lazy-load to all images on the page including the hero, since lazy-loading always improves performance regardless of position

Convert the hero image to Base64 format and include it inline in the HTML to eliminate the additional HTTP request and reduce network latency

Use `<link rel="preload">` for the hero image, modern formats (WebP/AVIF) with `<picture>`, `fetchpriority="high"`, explicit dimensions, and CDN with appropriate cache headers

This code causes CLS (Cumulative Layout Shift): `<img src="hero.jpg"><h1>Title</h1>` with CSS `@font-face { font-display: swap; }`. Why and how to fix it?

The image without `width`/`height` or `aspect-ratio` causes reflow on load, and `font-display: swap` causes shift when switching from fallback to custom font. Solution: explicit dimensions on img + `font-display: optional` or `size-adjust` in @font-face

CLS is caused only by font-swap; the image does not contribute to layout shift because modern browsers automatically reserve space

The problem is using `<img>` instead of `background-image` in CSS, since background images never cause layout shift when loading

CLS only occurs when JavaScript manipulates the DOM; static images and fonts never contribute to Cumulative Layout Shift

What is tree-shaking and how does the `sideEffects` property in package.json affect it?

Tree-shaking removes complete unreferenced files from the project during build, similar to a file system garbage collector

`sideEffects` is a property that only affects test execution and has no impact on the production bundle generated by the bundler

Tree-shaking eliminates dead code (non-imported exports) during bundling. `"sideEffects": false` tells the bundler it can safely remove non-imported modules. If a module has side effects (CSS imports, polyfills), it must be listed in the array

Tree-shaking only works with CommonJS modules (`require`/`module.exports`); ES modules (`import`/`export`) are not compatible with this optimization

Lighthouse reports TBT (Total Blocking Time) > 500ms. What tools and techniques would you use to diagnose and reduce it?

Just minifying JavaScript with terser or uglify is sufficient to reduce TBT below the threshold recommended by Lighthouse

Use DevTools Performance tab to identify long tasks, code-split with dynamic imports, defer non-critical scripts, move heavy work to Web Workers, and reduce main thread JavaScript with lazy hydration

Increasing the web server timeout will resolve TBT because the problem is that HTTP responses take too long to reach the client

Switching the network protocol to HTTP/3 automatically resolves TBT because multiplexing eliminates blocking of the browser main thread

Coding challenge

Develop a dashboard with lazy-loaded modules, centralized state management, and a table with virtual pagination (row virtualization). The project must include unit tests and achieve a Lighthouse Performance score > 90.

Requirements

Implement lazy-loading of at least 2 modules/routes with code-splitting
Centralized state management (NgRx, Pinia, Zustand, or similar)
Table with virtual pagination that efficiently renders 10,000+ rows
Unit tests covering state logic and key components
Lighthouse Performance score > 90 (document screenshot)

Examples

Input: { data: Array(10000).fill({ id, name, email, status }) }

Output: Virtualized table rendering only visible rows in the viewport (~20-30 rows), with smooth scrolling and pagination

Accepted technologies

Angular 17+
Vue 3 + Composition API
React 18+
Astro + framework islands
TypeScript required

Solution submission

Repository URL * Supported platforms: GitHub, GitLab, Bitbucket Enter a valid repository URL (https://github.com, gitlab.com, or bitbucket.org followed by owner/repository)