Frontend - Senior

0/18 preguntas respondidas 0%
Información del candidato
Formatos aceptados: PDF, DOC, DOCX. Máximo 5MB

Preguntas de conocimiento

Pregunta 1 de 18: Observa este formulario: `<form><input type="email" aria-label="Email"><input type="password" aria-describedby="pw-help"></form>`. ¿Qué problemas de accesibilidad tiene?
Pregunta 2 de 18: En una SPA con múltiples secciones dinámicas, ¿cómo deben estructurarse los headings para que un screen reader navegue correctamente?
Pregunta 3 de 18: Este grid layout se rompe en Safari: `.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .grid > .item { display: subgrid; grid-template-rows: subgrid; }`. ¿Cuál es el problema?
Pregunta 4 de 18: ¿Cuál es el orden correcto de la cascada de especificidad en CSS y cómo afectan `!important` y `@layer`?
Pregunta 5 de 18: Este componente tiene un memory leak: `class SearchComponent { constructor() { this.handler = (e) => this.onResize(e); window.addEventListener("resize", this.handler); } onResize(e) { /* actualiza UI */ } }`. ¿Cuál es el problema y la solución?
Pregunta 6 de 18: Esta implementación de debounce tiene un bug: `function debounce(fn, delay) { let timer; return function(...args) { timer = setTimeout(() => fn(...args), delay); }; }`. ¿Qué falta?
Pregunta 7 de 18: Este genérico TypeScript no infiere correctamente: `function merge<T>(a: T, b: T): T { return { ...a, ...b }; }` llamado con `merge({ x: 1 }, { y: 2 })`. ¿Cuál es el problema?
Pregunta 8 de 18: ¿Cómo se implementa correctamente un modal accesible según WCAG?
Pregunta 9 de 18: Este componente de tabs tiene errores de accesibilidad: `<div class="tabs"><button class="active">Tab 1</button><button>Tab 2</button></div><div class="panel">Content 1</div>`. ¿Qué falta?
Pregunta 10 de 18: ¿Cómo optimizar el SEO de una SPA con client-side rendering?
Pregunta 11 de 18: Este componente Angular tiene problemas de rendimiento: `@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) { /* cálculo pesado */ } }`. ¿Qué problemas hay?
Pregunta 12 de 18: ¿Cuál es la diferencia entre Signals y Observables en Angular 17+?
Pregunta 13 de 18: Este computed en Vue no se reactualiza: `const user = reactive({ address: { city: "Madrid" } }); const city = computed(() => user.address.city);` y luego se hace `user.address = { city: "Barcelona" }`. Pero en otro caso: `user.address.city = "Barcelona"` sí funciona. ¿Por qué falla el primer caso si se usa `Object.assign` mal?
Pregunta 14 de 18: ¿Cuál es la diferencia entre `ref`, `reactive` y `computed` en Vue Composition API?
Pregunta 15 de 18: ¿Qué estrategias reducen el LCP (Largest Contentful Paint) cuando hay imágenes hero pesadas?
Pregunta 16 de 18: Este código causa CLS (Cumulative Layout Shift): `<img src="hero.jpg"><h1>Title</h1>` con CSS `@font-face { font-display: swap; }`. ¿Por qué y cómo se soluciona?
Pregunta 17 de 18: ¿Qué es tree-shaking y cómo afecta la propiedad `sideEffects` en package.json?
Pregunta 18 de 18: Lighthouse reporta TBT (Total Blocking Time) > 500ms. ¿Qué herramientas y técnicas usarías para diagnosticar y reducir?

Desafío de código

Desarrolla un dashboard con lazy-loading de módulos, gestión de estado centralizada, y una tabla con paginación virtual (virtualización de filas). El proyecto debe incluir tests unitarios y obtener una puntuación de Lighthouse > 90 en performance.

Requisitos

  1. Implementar lazy-loading de al menos 2 módulos/rutas con code-splitting
  2. Gestión de estado centralizada (NgRx, Pinia, Zustand o similar)
  3. Tabla con paginación virtual que renderice eficientemente 10,000+ filas
  4. Tests unitarios con cobertura de la lógica de estado y componentes clave
  5. Lighthouse Performance score > 90 (documentar captura)

Ejemplos

Entrada: { data: Array(10000).fill({ id, name, email, status }) }
Salida: Tabla virtualizada que solo renderiza las filas visibles en el viewport (~20-30 filas), con scroll suave y paginación

Tecnologías aceptadas

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

Envío de solución

Plataformas soportadas: GitHub, GitLab, Bitbucket Introduce una URL válida de repositorio (https://github.com, gitlab.com o bitbucket.org seguido de usuario/repositorio)