diff --git a/README.md b/README.md index 662e421..c0c7ddb 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,13 @@ -# Posibles preguntas para entrevista de trabajo (Desarrollador Frontend). +# Posibles preguntas para entrevista de trabajo como desarrollador front-end. -Este repositorio contiene las respuestas a posibles preguntas de entrevistas a programadores front-end. La idea fundamental de este repo es incrementar mis conocimientos. +Este repositorio contiene las respuestas a posibles preguntas de entrevistas a programadores front-end. La idea fundamental de este repo es ayudar a candidatos a este rol a solidificar sus conocimientos. -**Nota:** No se aceptarán ```pull requests``` o ```peticiones de envío``` para ***resolver preguntas***, solo se aceptarán aquellos que formulen ***nuevas preguntas***. +**Nota:** No se aceptarán ```pull requests``` o ```peticiones de envío``` para ***resolver preguntas***. Solo se aceptarán aquellas que formulen ***nuevas preguntas***. ## Índice 1. [Preguntas generales](#general) + 1. [Preguntas de rendimiento web](#webperformance) 1. [Preguntas específicas de HTML](#html) 1. [Preguntas específicas de CSS](#css) 1. [Preguntas específicas de JavaScript](#js) @@ -15,40 +16,113 @@ Este repositorio contiene las respuestas a posibles preguntas de entrevistas a p #### Preguntas generales: +* Cuéntame sobre ti. * ¿Qué has aprendido en esta semana? * ¿Qué es lo que te interesa de la programación? +* ¿Qué es lo que más te interesa de este puesto? +* ¿Puedes decirme por qué elegiste una carrera como desarrollador front-end? +* Para ti, ¿cuál es la relación ideal entre diseño visual y el desarrollo front-end? * ¿Podría describir algún problema técnico que haya resuelto recientemente? * ¿Cuáles son las consideraciones del área de interfaces, rendimiento, posicionamiento, mantenimiento o seguridad que toma en cuenta al desarrollar sitios o aplicaciones web? * Si tuviera cinco hojas de estilo distintas, ¿cómo las integraría a su página web? * ¿Cómo optimizaría los recursos de un sitio web? -* Explique qué son las Aplicaciones de internet enriquecidas y accesibles y los lectores de pantalla, además de cómo hacer una página web accesible -* Explique las ventajas y desventajas de usar animaciones en CSS contrario a usar animaciones hechas con JavaScript. +* Explique qué son las aplicaciones de internet enriquecidas y accesibles y los lectores de pantalla, además de cómo hacer una página web accesible. +* Explique las ventajas y desventajas de usar animaciones en CSS, contrario a usar animaciones programadas en JavaScript. * ¿Qué significa CORS y a qué problema está relacionado? +* Mencione una ocasión en la que pasó por alto una solución obvia para arreglar un problema de desarrollo de software. +* ¿Cuál es su enfoque si sus compañeros dirigen el código en una dirección con la que no se siente usted confortable? +* ¿Cómo maneja comentarios críticos o negativos en un ambiente laboral? -##### ¿Qué sistemas de control de versiones ha usado? +##### ¿Qué sistema de control de versiones ha usado? -He usado GIT y Subversion (SVN), el primero mediante el úso de consola y el último con el cliente "Tortoise". +Referirse al empleo de Git a través de IDE plugins, herramientas GUI visuales, o línea de comandos. ##### ¿Cuál es su ambiente de desarrollo favorito? -Debido a que desarrollo principalmente con `javascript` me siento muy cómo usando [WebStorm](https://www.jetbrains.com/webstorm/ "Sitio Web de WebStorm") y [Sublime Text](http://www.sublimetext.com/ "Sitio web de Sublime Text"). +Debido a que desarrollo principalmente con JavaScript me siento muy cómo usando [WebStorm](https://www.jetbrains.com/webstorm/ "Sitio Web de WebStorm") y [Visual Studio Code](https://code.visualstudio.com/ "Sitio web de Visual Studio Code"). ##### ¿Puede describir el proceso que sigue cuando crea una página web? -Dependendiendo del tipo del proyecto puedo o usar generadores con Yeoman, o crear el Scaffolding manualmente. En caso de ser la segunda opción realizo los siguiente pasos: +En dependencia del tipo de proyecto y framework que se decida emplear, varios de los elementos a continuación pueden servir como punto de partida de una respuesta más elaborada: - * Creción de archivo index.html. *(php, jsp, dependiendo del proyecto)* - * Crear estructura de carpetas para recursos del sitio: - * CSS - Archivos css - * IMAGES - Imágenes - * JS - Archivos Javascript - * ASSETS - Librerías. (jquery, modernizr, prototype, etc.) - * FONTS - Fuentes tipográficas. +- Aprovechar herramientas como Create React App, Angular CLI, Vue CLI o SvelteKit para la creación, compilación y el despliegue. +- Configuración del archivo 'package.json' para gestionar dependencias y scripts si se usa Node.js. +- Crear el *scaffolding* manualmente. En caso de ser la segunda opción realizo los siguiente pasos: + * Creación del fichero index.html. *(php, jsp, dependiendo del proyecto)* + * Crear estructura de carpetas para recursos del sitio: + * CSS - Archivos css + * IMAGES - Imágenes + * JS - Archivos Javascript + * ASSETS - Librerías. (jquery, modernizr, prototype, etc.) + * FONTS - Fuentes tipográficas. -##### ¿Puede describir la diferencia entre "Progressive Enhancement" y "Graceful Degradation"? -*"Progressive Enhacement"* ó *"Mejora Progresiva"* es el concepto opuesto a *"Graceful Degradation"* ó *"Degradación Elegante"* (cómo yo lo llamo). Cuando se habla de *progressive enhancement* hacemos referencia a la técnica en donde un sitio web, dispone de características más avanzadas (tanto de diseño, usabilidad, y navegabilidad), cuanto más avanzado o moderno sea el navegador que utiliza el usuario. *Graceful degradation* es todo lo contrario, mientras más antigúo es el navegador, el sitio web tendrá funcionalidades muy límitadas en comparación con uno que usa uno más moderno. Esta es básicamente la diferencia entre *"Progressive Enhancement"* y *"Graceful Degradation"*. +##### ¿Puede describir la diferencia entre las técnicas "progressive enhancement" y "graceful degradation"? +*"Progressive enhacement"* ó *"mejora progresiva"* es el concepto opuesto a *"graceful degradation"* ó *"degradación elegante"* (cmo yo lo llamo). Cuando se habla de *progressive enhancement* hacemos referencia a la técnica en donde un sitio web, dispone de características más avanzadas (tanto de diseño, usabilidad, y navegabilidad), cuanto más avanzado o moderno sea el navegador que utiliza el usuario. *Graceful degradation* es todo lo contrario, mientras más antigúo es el navegador, el sitio web tendrá funcionalidades muy límitadas en comparación con uno que usa uno más moderno. -##### Explique qué significa "HTML Semántico". +##### ¿Cuál es el navegador que utiliza principalmente para el desarrollo y qué herramientas de desarrollo usa? +Principalmente [ Google Chrome ](https://www.google.com/chrome/browser/desktop/index.html), pero siempre tengo instalado [Mozilla Firefox](https://www.mozilla.org/es-AR/firefox/new/). Entre las herramientas que uso puedo mencionar: +- [WebStorm] +- [Visual Studio Code] +- [Chrome Developer Tools] +- [Angular CLI] +- [Npm] +- [Bower] +- [Sass] +- [Webpack] + +##### Si se ha unido a un proyecto y los desarrolladores usan tabulaciones y usted usa espacios, ¿qué hace? +##### ¿Cómo empiezas a contribuir en el desarrollo de un software del que no fuiste parte desde sus inicios? + +##### Escriba una página con una galería sencilla. +##### Si pudiera elegir una tecnología para dominar este año, ¿cuál sería? + +Definitivamente Javascript. + +##### Explique la importancia de estándares y los grupos que los definen. + + +#### Preguntas de rendimiento web: + +##### ¿Qué herramientas usa para probar el rendimiento de su código? + +Chrome DevTools. + +##### ¿Cómo optimizaría los recursos de un sitio web? +##### ¿Por qué es mejor utilizar varios dominios para distribuir los recursos de una página web? + +##### Mencione tres formas para disminuir el tiempo de carga de una página (tiempo real o percibido). + +##### ¿Sabe que es el FOUC? ¿Cómo lo evita? +*FOUC* es el acrónimo de __Flash Of Unstyled Content__. Es el fenómeno que ocurre, cuando al renderizar un sitio web, este se ve primero con los estilos por defecto del nevegador, y luego en un "pestañeo" los archivos creados por nosotros. Esto se puede originar por varios motivos, los más comúnes son: +- Alta latencia del servidor. +- Excesos de archivos javascript. +- Archivos css extremadamente grandes. + +Se puede evitar, creando archivos de estilos `.css` de tamaño moderado o varios distribuidos y optimizados (minificados y ofuscados). Tambien se puede aplicar __CSS Critical Path__. *Para saber más de Critical Path, leer este [enlace](https://www.smashingmagazine.com/2015/08/understanding-critical-css/)* + +##### ¿Cuáles son las métricas específicas de Core Web Vitals y cuáles son los umbrales recomendados para cada una? + +##### ¿Qué herramientas puedes utilizar para medir y mejorar los Core Web Vitals en tu aplicación web? + + +##### ¿Cómo afecta el uso de frameworks modernos de JavaScript a los Core Web Vitals de una aplicación web? + +##### + +#### Preguntas específicas de HTML: + +* ¿Qué función cumple el `doctype` y cuántos puede nombrar? +* ¿Cuál es la diferencia entre el modo convencional y el "quirks mode"? +* ¿Cuáles son las limitaciones al utilizar páginas XHTML? + * ¿Hay algún problema al servir las páginas usando: `application/xhtml+xml`? +* ¿Cómo programaría una página con contenido en varios idiomaas? ¿Qué consideraciones se deben tener cuando se diseñan/desarrollan sitios multi-lenguajes? +* ¿Qué son elementos abiertos y elementos cerrados? +* ¿Para qué son buenos los atributos `data-`? +* Si consideramos HTML5 como una plataforma web abierta, ¿cuáles son las piezas del lego que constituyen HTML5? +* ¿Cuáles son sus dos características favoritas de HTML5 y cómo las ha implementado en sus proyectos de front-end? +* Describa la diferencia entre cookies, session storage, local storage e IndexedDB. +* ¿Qué ocurre si olvidas colocar el `DOCTYPE` en un sitio web? +#### Explique qué significa "HTML Semántico". La palabra *"Semántica"* hace referencia a la ciencia linguística, que estudia el significado de las palabras y expresiones. Teniendo esto en cuenta, podemos decir que *"HTML Semántico"*, el es úso de las etiquetas HTML para expresar el significado real de la información en las páginas web, favoreciendo la usabilidad y accesibilidad. Se puede mirar de la siguiente manera: @@ -84,61 +158,6 @@ semper dignissim leo.

``` -##### ¿Cuál es el navegador que utiliza principalmente para el desarrollo y qué herramientas de desarrollo usa? -Principalmente [ Google Chrome ](https://www.google.com/chrome/browser/desktop/index.html), pero siempre tengo instalados, [Mozilla Firefox](https://www.mozilla.org/es-AR/firefox/new/). Dentro de las herramientas que uso puedo mencionar: -- [Sublime Text]. -- [Chrome Developer Tools]. -- [AngularJs, (próximamente Angular)]. -- [Npm]. -- [Bower] -- [Gulp, en fase inicial de incorporación en mis herramientas cotidianas]. -- [Sass]. -- [Livereload]. - - -##### ¿Cómo optimizaría los recursos de un sitio web? -##### ¿Por qué es mejor utilizar varios dominios para distribuir los recursos de una página web? -##### ¿Cuántos recursos se pueden descargar simultáneamente de un mismo dominio? - -Solamente 2 por dominio. - -##### Mencione tres formas para disminuir el tiempo de carga de una página (tiempo real o percibido). -##### Si se ha unido a un proyecto y los desarrolladores usan tabs y usted usa espacios, ¿qué hace? -##### Escriba una página con una galería sencilla. -##### ¿Qué herramientas usa para probar el rendimiento de su código? - -Chrome Developer Tools. - -##### Si pudiera elegir una tecnología para dominar este año, ¿cuál sería? - -Definitivamente Javascript. - -##### Explique la importancia de estándares y los grupos que los definen. -##### ¿Sabe que es el FOUC? ¿Cómo lo evita? -*FOUC* es el acrónimo de __Flash Of Unstyled Content__ , es el fenómeno que ocurre, cuando al renderizar un sitio web, este se ve primero con los estilos por defecto del nevegador, y luego en un "pestañeo" los archivos creados por nosotros. Esto se puede originar por varios motivos, los más comúnes son: -- Alta latencia del servidor. -- Excesos de archivos javascript. -- Archivos css extremadamente grandes. - -Se puede evitar, creando archivos de estilos `.css` de tamaño moderado o varios distribuidos y optimizados (minificados y ofuscados). Tambien se puede aplicar __CSS Critical Path__. *Para saber más de Critical Path, leer este [enlace](https://www.smashingmagazine.com/2015/08/understanding-critical-css/)* - -#### Preguntas específicas de HTML: - -* ¿Qué función cumple el `doctype` y cuántos puede nombrar? -* ¿Cuál es la diferencia entre el modo convencional y el "quirks mode"? -* ¿Cuáles son las limitaciones al utilizar páginas XHTML? - * ¿Hay algún problema al servir las páginas usando: `application/xhtml+xml`? -* ¿Cómo programaría una página con contenido en varios lenguajes? - * ¿Qué consideraciones se deben tener cuando se diseñan/desarrollan sitios multi-lenguajes? -* ¿Puede usar sintaxis de XHTML en HTML5? -* ¿Cómo usa XML en HTML5? -* ¿Para qué son buenos los atributos `data-`? -* ¿Cuáles son los modelos de contenido usados en HTML4? ¿Puede compararlos a los de HTML5? -* Si consideramos HTML5 como una plataforma web abierta, ¿cuáles son las piezas del lego que constituyen HTML5? -* Describa la diferencia entre cookies, sessionStorage y localStorage. -* ¿Qué son elementos abiertos y elementos cerrados?. -* ¿Qué ocurre si olvidas colocar el `DOCTYPE` en un sitio web?. - #### Preguntas específicas de CSS: * Describa qué es un archivo "reset" y por qué es útil. @@ -165,7 +184,8 @@ Se puede evitar, creando archivos de estilos `.css` de tamaño moderado o varios * ¿Cuál es la diferencia entre las posiciones `relative`, `fixed`, `absolute` y `static` para un elemento dado? * ¿Qué sabe sobre Css Flexbox y cuales son sus ventajas? * ¿Cuál es la diferencia entre `display:none` y `visibility:hidden`? - +* Describe tu proceso mental para la selección de Flexbox vs CSS Grid para resolver un arreglo específico de componentes en una página web. + ##### Explica los siguientes selectores: ```css @@ -179,6 +199,11 @@ a[rel='nofollow'] #### Preguntas específicas de JavaScript: +* ¿Cómo describirías la arquitectura de [Angular / React / Vue / Svelte / etc] a los desarrolladores full-stack de tu equipo? +* Menciona algunos factores que hacen único a [Angular / React / Vue / Svelte / etc] de otros frameworks basados en JavaScript. +* ¿Cuál es tu enfoque para la automatización de pruebas (pruebas unitarias, pruebas de componentes, pruebas e2e)? + + ##### Explique "event delegation". "Event Delegation" o "Delegación de Evento" no es más que la metodología de javascript que permite evitar la utilización de muchos `listeners` en nodos puntuales, creando un único en un nodo padre, para saber si algun evento fué disparado. Esto es posible gracias a 2 funcionalidades importantes del lenguaje como lo son `event bubbling` o `Propagación de evento` y `event target` o `Objetivo del evento`. @@ -342,5 +367,4 @@ foo.push(2); * ¿Qué es lo más genial que ha programado y qué es lo que más le enorgullece de ello? * ¿Cuáles son sus partes favoritas de las herramientas de desarrollo que usa? * ¿Tiene algún proyecto personal? ¿De qué tipo? -* ¿Cuál es su funcionalidad favorita de Internet Explorer? - +* ¿Cuál es una de sus funcionalidades favoritas que brindan los navegadores web modernos? \ No newline at end of file