Andrés Moreno Web Developer

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:

Otro slideshow a petición de Gustavo en un comentario del blog en el que indica que sería interesante que tuviera controles. Pues bien, tal como le comenté me puse manos a la obra y, espero que sea de su agrado ya que este slideshow responsive tiene algo más de curro que el anterior. Eso si, este ya no es tan liviano como el anterior ni en Javascript ni en CSS.

Por cierto Gustavo, no he puesto las imágenes como background, aunque podrías hacerlo incluyendo por cada elemento una imagen en tu CSS aplicando un alto.

Está inspirado en el de unslider.com, con la peculiaridad de no usar framework o librerías externas tipo JQuery, Prototype, Mootoools, etc. Las características que tiene esta demo son similares a las que proporciona unslider.com:

Navegación:

• Por mousewheel del ratón
• Por teclado
• Por enlaces
• Táctil para el móvil

Responsive

Se adapta perfectamente al tamaño de la pantalla en el que se visualiza. Pruébalo reduciendo el tamaño del browser con el que estés visitando esta página.

Configurable

Con unas pocas líneas de CSS puedes configurar el ancho y/o alto máximo de la galería. Es importante tener conocimientos básicos sobre las hojas de estilo. Para ello puedes sobreescribir las propiedades CSS en tú hoja de estilos, o puedes descargar la librería y modificar el CSS a tú gusto.

¿Cómo usar este SLIDESHOW?

En primer lugar debes descargar la librería o enlazar la librería desde tú código copiando estas líneas entre las etiquetas del documento HTML: