Si trabajas en desarrollo web, entonces casi seguro que has escuchado hablar de Webpack. Esta útil herramienta se vende como un "bundler", una herramienta capaz de empaquetar varios módulos JavaScript en un solo archivo .js para optimizar las descargas. Pero lo cierto es que es muchísimo más que eso. Es tan potente que hoy en día ha sustituido por completo a otras herramientas tradicionales de desarrollo web Front-End como Bower, Gulp o Grunt, e incluso a servidores web de desarrollo. En este artículo te explicamos qué es, para qué se usa y cuáles son sus ventajas e inconvenientes. [Más]

Hace casi un año se lanzaba la herramienta Yarn, creada por Facebook para sustituir y mejorar a npm (el gestor de paquetes de Node.js). La herramienta trataba de solucionar algunos problemas importantes de npm en proyectos muy grandes, como los que maneja Facebook. Por ejemplo, su lentitud y el hecho de que no era predecible en cuanto a la manera de descargar las dependencias. Desde su lanzamiento muchos programadores han adoptado Yarn como un sustituto inmediato de npm, ganando sobre todo en velocidad y comodidad de uso. Sin embargo npm se ha puesto las pilas y presentó hace poco su versión 5 que solucionaba algunos de esos problemas, quedando (casi) en igualdad de condiciones con Yarn. Pero solo casi... Ahora Yarn vuelve a adelantarles por la derecha con el lanzamiento de su versión 1.0, dando el paso a la madurez con este número de versión y añadiendo algunas novedades interesantes. [Más]

Si actualmente estás dando tus primeros pasos en el desarrollo web front end quizá no sepas que, hubo un tiempo, no muy lejano, en el que las webs eran bloques monolíticos donde el concepto de animación no iba mucho más allá de las diabólicas etiquetas <blink>, <marquee> o los gifs animados. En cambio, hoy en día nos podemos encontrar webs que son magníficas coreografías de elementos animados. En este post te recopilamos 9 bibliotecas de efectos y animaciones que te aportarán muchas ideas aparte de ahorrarte trabajo a la hora de animar tu web. Úsalas con mesura y sabiduría. [Más]

npm te permite gestionar dependencias de tus proyectos, tanto para desarrollo como para producción, y también se ha convertido en el task runner más utilizado, desplazando a herramientas como Grunt (casi desaparecido en combate) y Gulp (aunque este resiste mejor el embate). Aún así no está exento de problemas, fundamentalmente dos: es lento, y el orden de instalación de las dependencias no es predecible. Éstos no son realmente problemas importantes en proyectos pequeños, pero sí lo son cuando manejas proyectos de gran tamaño entre muchas personas. Su última versión soluciona algunos de los problemas que tenía y que la herramienta compatible Yarn estaba diseñada para solventar. A la luz de esto ¿sigue siendo relevante Yarn? ¿Deberíamos usarlo? [Más]

React es sin duda la librería de moda en el mundo del desarrollo web Front-End. Creada y mantenida por Facebook es una biblioteca para crear interfaces de usuario basadas en componentes. Se basa mucho en JavaScript y ECMAScript y utiliza un DOM Virtual para conseguir un altísimo rendimiento. Cada componente que creas puede mantener su propio estado, contener otros componentes y comunicarse entre ellos. En lugar de usar plantillas, la lógica de cada componente se crea con JavaScript/ECMAScript puro, por eso le gusta tanto a muchos programadores. Al basarse en componentes reutilizables, existen multitud de bibliotecas de componentes y extensiones listas para utilizar que te pueden ahorrar mucho trabajo a la hora de crear tus interfaces de usuario Web basadas en React.
Vamos a ver a continuación 5 de los más destacados... Por supuesto gratuitos y de código abierto. [Más]

Desde que AngularJS evolucionó a Angular nos encontramos ya por fin ante una tecnología madura. Un framework estable en el que vale la pena invertir tiempo y recursos para aprenderlo bien y sacarle provecho. No obstante, si todavía te estás iniciando y te encuentras un poco perdido, aquí te recopilamos algunos de los artículos sobre Angular más populares de nuestro blog y que te servirán para orientarte. [Más]

En este post vamos a ver cómo modificar fácilmente el tamaño de un reCAPTCHA o de cualquier otro widget externo que tengamos en nuestra web, en el caso de que se ponga rebelde. Aunque no sea algo difícil, la solución no es tan obvia como te puedas creer. Si no dominas a fondo HTML y CSS seguro que te viene bien este truco (y de paso, vete planteándote... [Más]

Si creamos una página web que sabemos que va a ser utilizada desde dispositivos móviles, o si se trata de una aplicación que luego desplegaremos usando algún entorno de empaquetado de aplicaciones como Apache Cordova/PhoneGap, puede resultar muy útil permitir que los usuarios marquen un número de teléfono o envíen un SMS solamente pulsando un botón o un enlace. El acceso al teléfono, entendiendo por ello la posibilidad de realizar llamadas, es muy limitado en aplicaciones HTML5. De hecho, no hay manera de acceder a los contactos en una aplicación web pura. Aunque el W3C estuvo trabajando en una especificación al respecto se abandonó hace años y no está soportada por ningún navegador. Mediante tencologías como Apache Cordova o PhoneGap sí es posible, pero no en HTML puro que es lo que estamos tratando aquí. En este caso lo único que puede hacerse es generar un enlace (etiqueta ) y que al pulsarlo realice una llamada a un número de teléfono determinado. [Más]

Un tipo de herramientas muy de moda en los últimos años entre los desarrolladores Web son los llamados "code playground" o "entornos de juego con código". Se trata de espacios on-line que permiten escribir código y ver el resultado inmediatamente, usando por debajo ya ciertos lenguajes y bibliotecas que podamos necesitar. Estas herramientas son geniales pues nos permiten probar código rápidamente, colaborar con otras personas en resolver ciertos problemas o colgar código de ejemplo para nuestro blog, una formación o para pasar a algún amigo. Además soportan múltiples lenguajes o meta-lenguajes. Todo esto está muy bien y nos permite colaborar con otros también. Pero ¿qué pasa si queremos poder hacer lo mismo sin conexión (en un avión o cuando estamos en el extranjero)? ¿Por qué tenemos que esperar varios segundos a que carguen todos los recursos necesarios antes de poder empezar a experimentar? Con esta herramienta tenemos una solución gratuita, rápida y sin conexión para hacer lo mismo. [Más]

Los frameworks web de JavaScript pueden ser una solución muy útil para el desarrollo rápido de aplicaciones web. Sirven de estructura para aplicaciones de una sola página (SPA), permiten a los desarrolladores preocuparse menos de la estructura del código y el mantenimiento, y centrarse en la funcionalidad. Usar un framework JavaScript para desarrollar nuestras aplicaciones tiene múltiples ventajas. En los últimos tiempos han proliferado tantos y son todos tan atractivos que el problema se ha convertido en ¿qué framework JavaScript debo escoger? En este artículo repasamos los 5 que van por delante en la carrera con sus pros y sus contras para ayudarte a elegir. [Más]