Video explicativo:
Hola! Este post es una especie de archivo del contenido que he encontrado en internet sobre qué cosas pueden preguntar en una entrevista técnica como frontend junior y que yo considero relevantes al momento de escribirlo. Aclaro que esto es en base a prueba tecnica de junior, los ejercicios o la forma de evaluar dependerá de cada empreza, puede que esto no sea valido en mucho de los casos. Lo importante al final del día es que podamos ofrecer el skill set que ellos estan buscando como empresa, sin mas.
Leer para entender:
Está ordenado en dos partes, la primera donde respondo las respuestas en base a un video, y la otra donde coloco enlaces a videos y / o canales que me parecen relevantes. Prestar atención a los links ya que tambien redirecciono a contenido util.
PD, no nos volvamos locos con todo el contenido, yo aún no domino todos los condeptos... pero paso a paso!
Comencemos.
Parte uno
Buscando cual era el conocimiento o las cosas que necesito saber y dominar para poder tener un trabajo como junior, me encontré con un video de Joacog Programa en donde daba una lista de preguntas que suelen hacer sobre la parte técnica para frontend junior tocando HTML, CSS, JS, React y otros temas mas.
Todas estas preguntas yo las anote en su momento, ahora viéndolo me parece interesante hablar de ellas, responderlas (ya que en el video no lo hace) y estudiarlas. Muchas de ellas son básicas si ya dominas los conceptos, pero creo yo que es importante saberlas, ya que de lo contrario damos una imagen de que no sabemos lo que hacemos.
Vamos con las preguntas y respuestas:
HTML:
1 - Qué es HTML?
HyperText Markup Language, hace referencia al lenguaje de marcado para la elaboración de páginas web.
2 - Que son los tags semantics como article, title, sidebar, navbar y para que sirven?
Los tags nos ayudan a ubicarnos para hacer un código mas claro y fácil de mantener.
Section contiene varios tags semantics, como si fuese una caja mas grande donde dentro de ella podemos colocar divs, nav, header, etcetera.
Article especifica qué independiente, auto-contiene contenido ya sea formulario, post, blog o una nueva historia.
Navbar, la barra de navegación (que contiene links).
Sidebar, la barra de forma vertical que se coloca en un lado del sitio.
CSS:
1 - Qué es CSS?
Es un lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado.
2 - Qué formas hay de aplicar estilos?
Una llamando a la etiqueta en si (ejemplo a todos los elementos span), con clases y otra con id.
3 - Qué diferencia hay entre una clase y un id?
Una clase la podemos usar varias veces dentro de un documento y el id no.
4 - Cómo hago para que una columna de divs o imágenes se vean en forma de fila?
Display: flex, opcional: flex direction row.
5 - Cómo hago animaciones?
Accedé aquí para ver en vivo.
6 - Cómo hago para que un rectángulo aumente de tamaño cuando paso el mouse por arriba?
Uso pseudoclase :hover { width: 500px; }
7 - Qué son las pseudoclases?
Son usadas para definir un estado especial de un elemento, encontrá los indices aquí.
8 - Cómo uso mediaqueris?
9 - Qué es un pre-procesador de CSS y para qué sirve?
Programa que permite genera CSS a partir de la sintaxis del preprocesador, agregando también características que no existen en CSS puro como variable, mixings, extends, selectores anidados, etcetera. Los mas usados son SASS y less.
JavaScript:
1 - Qué es un scope?
Una scope determina la accesibilidad o visibilidad de una variable, ejemplo si creo una variable de una función no puedo acceder a ella si estoy fuera de la función.
2 - Diferencias entre var let y const.
Var la uso para declarar variables y que no necesariamente tengan un valor definido al momento de crearlas, let las creo con un valor; var y let me permiten sobreescribir su valor.
3 - Qué es el hoisting?
Comportamiento por defecto de js de mover todas las declaraciones al top.
Ampliá el concepto con este video.
4 - Cuál es la diferencia entre "==" y "===" ?
"==" es comparador no tan estricto como "===".
5 - Es JavaScript single thread? Qué significa single threaded?
Si lo es, eso significa que realiza un proceso a la vez.
6 - Qué es un if else?
Ejecuta una sentencia si una condición específicada es evaluada como verdadera. Si la condición es evaluada como falsa, otra sentencia puede ser ejecutada.
7 - Diferencia entre arrow functions y regular functions.
Arrow functions:
Son anónimas.
Por defecto retornan (sin colocar el resturn).
Podemos guardarlas en una variable.
Si en los parametros que le pasamos, tenemos uno, podemos quitar los parentesis.
Si la instrucción es una, podemos quitar los corchetes.
Si no hay parametro podemos pasarle un guión bajo (_).
El this es diferente de las regunales, nos lleva al objeto general window.
Regular functions: lo contrario de la arrow.
Video de Damian Sire
Video de Leonidas Esteban
8 - Qué es una clase?
Explicación facil y sensilla según yo: como si fuese una plantilla para crear objetos tipo “molde de galletas”.
Ahora, explicado de forma profesional en la documentación de W3School.
9 - Qué es elevnto loop? Cómo maneja JS el asincronismo?
Es lo que se encarga de ejecutar las funciones asíncronas, explicado en este video por El Cloud de Pau.
10 - Consideraciones al usar el this.
En este tema no he encontrado mucha información al no entender a que se refiere con la pregunta, pero un detalle del this es que hace referencia al contexto en el que se esta creando.
Explicado mejor en este video por Carlos Azaustre.
11 - Que son clousers?
Segun yo, patron similar a clases, pero veamos los videos de:
Clousers con Carlos Azaustre, de nuevo con Carlitos...
12 - Cómo funciona la herencia en JavaScript?
Clases y herencia con Jon Mircha.
13 - Map, filter y redux.
En el video de La Cocina del Código.
REACT:
1 - Qué es React?
Una biblioteca de JavaScript para construir interfaces de usuario
2 - Qué es el DOM?
Las siglas DOM significan Document Object Model, o lo que es lo mismo, la estructura del documento HTML. Una página HTML está formada por múltiples etiquetas HTML, anidadas una dentro de otra, formando un árbol de etiquetas relacionadas entre sí, que se denomina árbol DOM (o simplemente DOM).
3 - Qué es el virtual DOM y para que es usado?
El Virtual DOM es una representación del DOM guardada en memoria, que actúa de intermediario entre los estados de la aplicación y los estados del DOM (vistos por el usuario). Cuando ocurre un cambio en la aplicación web, el virtual DOM interpreta dichos cambios y calcula la manera más eficiente de actualizar el DOM para que renderice la menor cantidad de cambios posibles.
4 - Diferencias entre state ful y state less component?
El Virtual DOM es una representación del DOM guardada en memoria, que actúa de intermediario entre los estados de la aplicación y los estados del DOM (vistos por el usuario). Cuando ocurre un cambio en la aplicación web, el virtual DOM interpreta dichos cambios y calcula la manera más eficiente de actualizar el DOM para que renderice la menor cantidad de cambios posibles.
5 - Listar los lifecycle methods.
Directamente en la documentación de React.
6 - Qué son los hooks?
Beto Modeano lo explica mejor en este video.
7 - Qué es Redux y para qué sirve?
En este extenso post de desarrolloweb.com lo vemos a detalle.
PROGRAMACION ORIENTADA A OBJETOS (POO):
La programación Orientada a objetos se define como un paradigma de la programación, una manera de programar específica, donde se organiza el código en unidades denominadas clases, de las cuales se crean objetos que se relacionan entre sí para conseguir los objetivos de las aplicaciones.
Podemos entender la programación Orientada a objetos (POO) como una forma especial de programar, más cercana a como expresaríamos las cosas en la vida real que otros tipos de programación, que permite diseñar mejor las aplicaciones, llegando a mayores cotas de complejidad, sin que el código se vuelva inmanejable.
Patrones de diseño mas utilizados explicado por Hola mundo en este video.
UNIT TESTING:
Unit testing, qué es y para qué sirve?
Platzi explica que es en este post, tambien mira el post de THREEPOINTS sobre TDD.
METODOLOGIA AGIL SCRUM:
EDteam te lo explica en este video.
EJERCICIOS SIN ESCRIBIR:
1 - Tenés un string de nombres separados por una coma, como hago para separarlos y pasarlos a un array?
2 - Ahora tenemos el array con los nombres pero algunos están repetidos, como haces para sacar los nombres repetidos?
PARTE DOS (recursos utiles)
No son muchos, pero no necesitamos mas yo creo... entender lo que necesitamos saber, estudiar, aplicar, practicar y postular hasta contratar, con rima y todo!
- 35 preguntas de entrevista técnica para Frontend
- Ejercicios interactivos y preguntas clásicas de entrevistas técnicas de Front End de Javascript
- Canal de YouTube de GonzaloPozzo donde en ocaciones habla sobre pruebas técnicas, consejos, realiza practicas en la comunidad y mas.
FIN
Espero que te haya sido de ayuda este archivo que fui haciendo a medida que investigaba sobre el tema.
Comparte este post con quien creas que le puede aportar!
Nos vemos en los editores de texto.