Cómo superar los desafíos de codificación de entrevistas de trabajo

Como muchos de ustedes saben, he estado solicitando un trabajo en desarrollo web durante algunas semanas y pensé que sería una buena idea compartir algunos de los desafíos de codificación que he encontrado.

No solo eso, sino que compartiré las formas en que resolví estos desafíos. Por supuesto, hay muchas formas de resolver estos desafíos, pero estas son las formas en que lo hice. ¡Si tienes diferentes formas, eso es increíble y me encantaría que las compartieras conmigo!

No compartiré ninguna información identificable sobre las empresas o detalles sobre el proceso de entrevista de dicha empresa para preservar la integridad del proceso.

Muy bien, empecemos entonces.

El reto

Este es un desafío que me dieron recientemente y me sentí bien al resolverlo:

Tarea: Devolver una lista de publicaciones con estilo básico desde un punto final en orden cronológico inverso

Para proteger a la empresa y su información, no compartiré la URL de la que devolví la información, sino que tendré un enlace genérico de JSONPlaceholder (una gran API gratuita de código abierto para desarrolladores cuando necesites obtener algunos datos externos genéricos) en el código siguiente.

Aquí está el HTML con el que comencé, así que tenemos algo para mostrar nuestros resultados:

los

Original text


    La etiqueta tiene una identificación para que podamos diseñarla más adelante en el proceso.

    Obtención de datos del punto final

    Muy bien, profundicemos en la parte de JavaScript de este desafío. Primero, me gusta configurar mis variables de salida y visualización:

    Utilizo let para la variable de salida y la configuro como nula porque cambiaremos su valor más adelante en el código. La variable de lista se declara con const porque su valor no cambiará.

    En el ejemplo anterior, estamos declarando una función de flecha llamada getData envuelta en un bloque try… catch (Esta es una sintaxis más limpia / más fácil de usar / leer que usa un código de intentos y detecta errores si ocurren; la parte de captura a continuación). Debido a que obtenemos datos de forma asincrónica, también necesitamos hacer uso de async / await para obtener datos. Este es el método con el que me siento más cómodo, pero sé que hay muchas otras formas de obtener datos de un punto final, así que no dude en compartir el suyo: D

    Una vez que hemos declarado nuestra variable de datos , lo siguiente es establecer una variable para convertir los datos devueltos en un objeto JSON para que podamos obtenerlo en una forma utilizable. Hacemos eso con el método .json () . También estamos esperando los datos porque si omitiéramos la palabra clave await , JavaScript intentaría convertir la variable de datos en JSON, pero los datos aún no estarían allí porque provienen de una API asincrónica.

    Como última línea de la sección, consolamos.log nuestros datos que obtenemos del punto final de la API solo para asegurarnos de que estamos obteniendo todo lo que queríamos. Tenemos una matriz llena de objetos. También notará que la clave Published_at contiene nuestras fechas y no están en ningún tipo de orden. Su formato tampoco es un número simple de cuatro dígitos que represente el año, lo que facilitaría su filtrado en orden cronológico inverso . Tendremos que encargarnos de eso.

    Manipulación de nuestros datos

    Aquí declaramos la variable dataCopy que apunta a la variable dataJSON mutada en una matriz a través del operador de propagación (...) . Esencialmente, estamos copiando nuestros datos JSON devueltos para no manipular el original (mala práctica) mientras lo convertimos en una matriz para que podamos iterar sobre él.

    Después, ordenamos la matriz. Sort es un método de matriz extremadamente útil que pondrá nuestros índices de matriz en el orden que elijamos en función de la función que pasamos a sort.

    Por lo general, es posible que deseemos ordenar los datos según el valor (de mayor a menor), de modo que restamos el parámetro a del parámetro b . Pero debido a que necesitamos para mostrar los resultados en orden cronológico inverso decidí producir una nueva fecha (logrado con el nuevo operador y el código JavaScript, construido en el método de la fecha que crea una nueva plataforma independiente instancia de una fecha formateada. Ahora, debido a una y b representar nuestros objetos que se encuentran dentro de nuestros índices de matriz, podemos acceder a los pares clave / valor que se encuentran dentro de dichos objetos. Entonces, restamos b.published_at de a.published_at y esto debería darnos nuestras fechas enorden cronológico inverso .

    Exhibiendo los frutos de nuestro trabajo

    ¿Recuerda esa variable de salida que establecimos en nula en la parte superior de nuestro programa? ¡Bueno, ahora es el momento de brillar!

    Entonces, están sucediendo algunas cosas aquí. Primero, estamos configurando nuestra variable de salida a un nuevo valor mapeando nuestra variable dataCopy usando el método map . Este método devuelve una nueva matriz con los resultados de llamar a la función proporcionada una vez para cada índice. El parámetro de elemento representa nuestros objetos dentro de nuestra matriz que se devolvió desde el punto final y, por lo tanto, tiene acceso a todas sus propiedades, como título y Published_at .

    Devolvemos dos elementos de lista con un dentro de cada uno (para fines de estilo), así como una cadena para los encabezados Título y Fecha de publicación . Dentro de ellos, tenemos nuestras variables que usan literales de plantilla para establecer el título y la fecha de cada publicación.

    Luego, establecemos el innerHTML de nuestra variable de lista igual al de nuestra variable de salida .

    Finalmente, tenemos el corchete de cierre y el manejo de errores de nuestro bloque try ... catch , así como nuestra llamada a la función:

    Código final

    Así es como se ve nuestro cuerpo de código completo ahora:

    Y aquí está nuestro estilo CSS básico:

    Y aquí está el resultado de nuestro trabajo con su estilo muy básico:

    Como puede ver, logramos lo que nos propusimos hacer y, de hecho, la lista está en orden cronológico inverso . ¡Hurra!

    Espero que hayan disfrutado de este recorrido por mi proceso de pensamiento y de cómo resolví este desafío. Por supuesto, hay muchas formas de completar esto, ¡así que siéntete libre de compartir la tuya conmigo! ¡Estoy emocionado de continuar con esta serie y publicaré otra después de que haya pasado por otro desafío!

    Además, publico la mayoría de mis artículos en grandes plataformas como Dev.to y Medium para que puedas encontrar mi trabajo allí también. Este artículo se publicó originalmente en mi blog el 27 de mayo de 2019.

    Mientras estás aquí, ¿por qué no te suscribes a mi Newsletter ? Prometo que nunca enviaré spam a su bandeja de entrada y su información no se compartirá con nadie / sitio. Me gusta enviar ocasionalmente recursos interesantes que encuentro, artículos sobre desarrollo web y una lista de mis publicaciones más recientes.

    ¡Que tengas un día increíble lleno de amor, alegría y programación!