Andrés Moreno Web Developer

Hace unas semanas me encontré con una tarea en el trabajo que consistía en validar campos de formularios con JavaScript. Ya ya, existe el atributo pattern de HTML que hace esta tarea mucho más fácil, pero en este caso era, más que un requisito, una exigencia del cliente. No quería validarlo con estos atributos. Prefería hacerlo con JavaScript, así que hubo que remangarse. En ese momento pensé que ¡¡la validación de formularios con JavaScript siempre vuelve!!

Uno de las validaciones más costosos fue la de la fecha de nacimiento. Siguiendo la recomendación de un montón de artículos que leí (¡¡mentira!!, fue el diseñador quien lo propuso así) para introducir la fecha de nacimiento, es mejor dividir cada elemento de la fecha en los tres elementos que forman dicha fecha: día, mes y año. Así que tampoco podía usar un elemento de entrada tipo date. Así que, desde este punto, creé un componente HTML con tres elementos HTML select para cada elemento de la fecha.

Con esto en mente, para validarlo, debía obtener el valor de los tres elementos y formar una fecha, formato cadena, y que esta tuviera sentido. Comprobar que esa fecha se corresponde con una fecha real del pasado.

Explicado así, no parecía una tarea demasiado compleja. Pues resultó ser algo muuuucho más coñazo. Me encontré con varios problemas a la hora de validar la fecha y quiero dejar aquí escrito ese testimonio. ¿Quereís saber cuales fueron? Pues vamos allá.

Al igual que en SASS, en styled-components también podemos usar funciones y mixins como herramientas que nos ayuden a realizar tareas con el mismo objetivo que con el pre-procesador.

Para estas herramientas he creado las carpetas styled-components-utils/mixins y styled-components-utils/functions dentro del proyecto. En cada una de ellas he creado un fichero index.js que me sirve de bootstrap para los mixins y funciones.

De esta forma, en el caso que el número de mixins y funciones comience a ser muy elevado, evito que los ficheros crezcan de forma desmesurada, haciendo complicado la búsqueda y lectura.

Por lo demás, el funcionamiento de estas utilidades para crear estilos, es similar a otros pre-procesadores CSS, en este caso, utilizando una sintaxis JavaScript de lo más moderna. Vamos a ver.

En la guía anterior, Entorno de desarrollo por componentes con React, styled-components y storybook, dejé preparado el PC con las herramientas necesarias para poder desarrollar componentes en un ecosistema JavaScript. También creé un proyecto con estas herramientas e hice la prueba para ver si todo funcionaba correctamente.

En esta guía, mi intención es crear un componente muy básico para aprender a manejarme en este ecosistema JavaScript paso a paso

El primer problema con el que me encuentro es que el entorno creado con la herramienta create-react-app que instalé, genera un arquetipo de aplicación y para esta guía mis necesidades son otras. Así que empezaré por la configuración del proyecto.

Dejo el enlace al repositorio de la aplicación por si alguién más quiere echarle un ojo y/o clonarlo.

Para que me sirva de guía en el presente, voy a crear esta guía para la instalación de un entorno de desarrollo de componentes en un ecosistema JavaScript. Para ello voy a necesitar:

• Servidor Node.js y npm
• Instalación de la librería React
• Instalación de storybook
• Creación de un proyecto
• Añadir la dependencia styled-components para la creación CSS

El objetivo de este entorno es la creación de componentes genéricos aislados, aprender más sobre este entorno y, aunque lo dudo, sería interesante crear una librería de componentes para proyectos futuros. Aunque, hay que decirlo, creo que tendrá poco recorrido ya que los primeros intentos casi siempre me salen rana.

Para realizar esta guía e instalación voy a usar una máquina normalita que tiene instalado un Ubuntu 16.04 LTS.

Lo leía el otro día en algún post o twitter, "Nos guste o no Internet Explorer tiene una cuota de mercado muy alta", y es cierto, sobretodo si sumamos los datos de todas las versiones. Bien, pues al trabajar con Ubuntu hasta ahora no podía comprobar el resultado de la web en los nuevos navegadores de la familia Microsoft. Pues esto se ha acabado desde hace un tiempo, ya que han puesto a disposición de todo el mundo y de forma gratuita máquinas virtuales con cada navegador y distintos sistemas operativos.

Bueno, aquí voy a explicar como instalar en Ubuntu las máquinas virtuales que proponen en Modern.IE. Nos servirá como herramientas de test Cross Browser para nuestros proyectos web. Aunque en su página viene bastante bien explicado yo voy a detallar los pasos que he seguido.

Instalar VirtualBox de Oracle

Lo primero es tener instalado este programa, ya que para las plataforma Linux solo nos podemos descargar las máquinas virtuales para este programa.

Para instalarlo pues lo más fácil es descargarlo desde el Centro de Software de Ubuntu. ¿Qué buscas y no está? pues nada, vamos a la página de VirtualBox y elegimos de la lista la que corresponda con nuestra distribución.

Otra forma es añadir a tu fichero /etc/apt/sources.list el recurso correspondiente. En mi caso como tengo una distribución algo antigua de Ubuntu pues sería esta: