2019 - Ultimos articulos

  • Webpack transpilando javascript es6 con babel 7

    Seguimos con la guía de Webpack, en este articulo aprenderemos a configurar nuestro entorno de desarrollo con Webpack para que pueda transpilar código es6 (también transpila código de es7) a Javascript convencional (ES5), para lograrlo utilizaremos la librería Babel, pongamos manos a la obra. Este articulo forma parte del Curso...

  • Webpack anulando la entrada y salida por defecto

    [MicroPost] Siguiendo con la guía básica de Webpack en esta micro entrada vamos a aprender a anular los puntos de entrada y salida que tiene Webpack por defecto, recordando que no necesitamos generar un archivo de configuración para lograrlo. Este articulo forma parte del Curso de Webpack, puedes acceder al...

  • Webpack modo de producción y desarrollo

    Seguimos con la guía de configuración de Webpack, en esta parte hay un punto a destacar, aunque su ultima versión no requiere un archivo de configuración, te habrás dado cuenta que al ejecutar Webpack nos muestra un mensaje de advertencia en el cual nos indica que debemos seleccionar un modo...

  • Trabajando con formularios en ReactJS

    Crear formularios con RectJS es muy sencillo, solo hay que poner atención en una sola cosa, los elementos de formularios HTML funcionan de forma un poco diferente a otros elementos en el DOM con React, ya que los formularios normalmente mantienen algún estado interno de los datos, en este articulo...

  • Webpack Instalación y primeros pasos

    Webpack es un paquete de módulos estáticos para nuestras aplicaciones JavaScript modernas. Cuando el Webpack procesa nuestra aplicación, genera internamente un gráfico de dependencia que mapea cada módulo (como lo muestra la imagen de abajo) que nuestro proyecto necesita y genera uno o más paquetes según nuestra configuración. Este articulo...

  • Webpack extraer CSS a un archivo

    Seguimos con la guia de Webpack, en este articulo aprenderemos a configurar nuestro entorno de desarrollo con webpack para que pueda extraer el css de los archivos Javascript, para lograrlo utilizaremos mini-css-extract-plugin, su configuración es muy parecida al componente de HTML. Extracción de CSS en Webpack Si vienens utilizando Webpack...

  • Webpack crear un servidor local

    Seguimos con la guia de Webpack, en este articulo aprenderemos a configurar nuestro entorno de desarrollo con webpack para poder crear un servidor local y poder correr nuestra aplicación sin ningun problema, realmente es muy sencillo hacerlo, pongamos manos a la obra. Webpack dev server Si seguiste la guia, notaras...

  • Configurar webpack con react

    Seguimos con la guia de Webpack, en este articulo aprenderemos a configurar webpack para poder trabajar con React, si aun no tienes configurado el transpilador de es6 para webpack, es necesario que lo hagas ya que es esencial para trabajar con React. Webpack transpilador de es6 Configurar React para Webpack...

2018 - Ultimos articulos

  • Modo offline con Angular y service worker

    Un problema habitual de las SPA (Single Page Application) es que tarda mucho en cargar por que toda la lógica de la aplicación se carga en un solo archivo, gracias a la API de service worker (incluidos en Angular 5+) podemos cargar más rápido nuestra aplicación y hacer que funcione...

  • Iconos para Angular con font awesome

    Actualmente el uso de iconos vectoriales (se ajustan/escalan al tamaño que los necesitemos) en nuestras aplicaciones es indispensable, y font awesome es una gran alternativa para poder utilizarlos en nuestras aplicaciones de Angular, su instalación y configuración es muy sencilla, así como la forma de utilizarlos, en este articulo aprenderemos...

  • Actualizar de Angular 4 a Angular 5

    [MicroPost] si estas interesado en actualizar un proyecto ya existente de Angular tienes dos opciones para elegir, la primera es actualizar Angular CLI y crear un nuevo proyecto en Angular 5, si lo haces de esta forma, una vez creado el proyecto nuevo solo debes copiar los archivos (componentes, servicios,...

  • Actualizar Angular CLI y crear proyecto para Angular 5

    Angular CLI es una herramienta de linea de comandos imprescindible para crear nuestros proyectos con Angular, normalmente para poder tener la ultima versión estable de Angular (actualmente la versión 5 es la estable y la versión 6 esta en fase de desarrollo) es necesario actualizar, lo cual aprenderemos a hacer...

  • Mostrar y ocultar elementos en Angular

    En el articulo pasado aprendimos a trabajar con servicios en Angular, y como como parte de este proceso borramos los sitios de interés que declaramos de forma manual para poder mostrar solamente los que añadimos mediante un formulario, al haber hecho este cambio y cargar la aplicación por primera vez,...

  • Servicios con Angular

    Los servicios son la mejor forma de compartir datos y funcionalidades entre componentes con Angular, ya sean datos propios (datos almacenados temporalmente en nuestra aplicación) u obtenidos desde una API Rest, en nuestra aplicación trabajamos con un objeto en donde almacenamos nuestros datos, pero este objeto esta declarado en un...

  • Formularios con Angular

    El uso de formularios es indispensable en cualquier tipo de aplicación (inicio de sesión, contacto, ayuda, etc), y con Angular no podría ser la excepción, si ya has trabajado con formularios utilizando Javascript puro (un trabajo un poco tedioso), te sorprenderá la diferencia al trabajar con formularios en Angular ya...

  • Mostrar datos de arrays con map y React

    Antes de comenzar debemos recordar que en Javascript todos los array (incluso todo los elementos) son considerados objetos, una vez aclarado este punto podemos seguir, una de las formas habituales de almacenar datos en Javascript es añadirlos a un objeto con sintaxis JSON y en React no es la excepción,...

  • Destructuring assignment es6 (javascript)

    Destructuring assignmen o asignación por destructuración es otro de los pequeños cambios del nuevo estándar de Javascript (ES6) pero que seguramente nos sera de gran utilidad al momento de programar, ya que nos facilitara la extracción de datos de los objetos de una forma sencilla. Recuerda que en Javascript los...

  • Interpolación, property y event binding con Angular

    Nuestra aplicación de Angular ya cuenta con un componente que nos va a permitir agregar y mostrar en pantalla enlaces de interés mediante un pequeño formulario, pero en este momento aun no realiza nada útil nuestra aplicación, es decir, aun no es funcional, en este articulo nos vamos a dedicar...

  • Manejadores de eventos con React

    El manejo de eventos en React es muy parecido a como lo hacemos normalmente con Javascript, aunque este ultimo suele utilizar oyentes como “addEventListener()” en elementos del DOM en espera de, como su nombre lo indica, ocurra algún evento, con React no funciona de esta forma, el oyente se incluye...

  • Entendiendo el virtual DOM en React

    React introdujo por completo el tema de virtual DOM en nuestras tareas de desarrollo (aun que hay muchas librerías con las que lo podemos trabajar), y me gustaría que antes de continuar con el curso de React aclaremos que es el DOM, el virtual DOM y las diferencias que existen...

  • Plantillas y estilos CSS con Angular

    En este articulo aprenderemos a trabajar con plantillas (templates) y estilos CSS para nuestros componentes, Angular nos proporciona un poderoso sistema de plantillas basado en HTML que nos permite comunicarnos ya sea de la plantilla al componente o viceversa (este ultimo lo veremos en el siguiente articulo), además, Angular nos...

  • Componentes, props y estados con React

    El desarrollo de aplicaciones web con react se vuelve realmente fácil si utilizamos JSX para crear las vistas y lógica de estas, en este articulo abarcaremos el tema de los componentes (components) y sus características, claro en complemento con JSX para facilitarnos aun más el desarrollo, pero sobre todo el...

  • Introducción a JSX

    Si queremos aprender a crear aplicaciones con React lo mejor (recomendado) es ayudarnos de JSX para crear las vistas, con la cual vamos a romper buenas practicas de programación que se han mantenido hasta el día de hoy, por ejemplo tomando en cuenta el modelo de arquitectura MVC, todos sabemos...

  • Introducción a React creando aplicación básica

    Al leer o encontrar algo relacionado con React seguramente si eres desarrollador web lo primero que se te viene a la mente es que framework es mejor?, Angular o React (entre otros), lo primero es aclarar este concepto erróneo ya que Angular es un framework completo (hay que seguir sus...

2017 - Ultimos articulos

  • Crear componentes en Angular

    En el articulo anterior explicamos en que consiste la arquitectura del componente principal de Angular (este componente lo obtenemos por defecto al crear nuestro proyecto), te recomiendo que le des una leída para que puedas tener los conocimientos sobre la función que realiza cada uno de los archivos delcomponente y...

  • Arquitectura de componentes en Angular

    En este articulo vamos a adentrarnos un poco mas a la temática de Angular conociendo su componente principal, si quieres seguir este articulo es necesario crear un proyecto nuevo con angular como lo hicimos en el articulo anterior (también puedes utilizar algún proyecto que ya tengas). Este articulo forma parte...

  • Mi primera app con Angular y Angular CLI

    En el articulo anterior vimos una introducción a Angular donde hablamos de algunas comparaciones entre la versión anterior (AngularJS 1.x) y la versión nueva (llamada solamente Angular), donde a grandes rasgos explicaba que Angular fue reconstruido desde cero y por lo tanto hay un gran cambio en su funcionamiento el...

  • El core (núcleo) de NodeJS

    En la introducción a NodeJS vimos las bases de las cuales partiremos para aprender a programar grandes aplicaciones entre las cuales destacamos el uso de callbacks y promesas para tener una aplicación asíncrona así como la importancia de aprender ES6, ya que la mayoría de ejemplos estará basada en este...

  • Template strings es6 (javascript)

    Seguimos ampliando nuestro repertorio de artículos de ES6 (el nuevo estándar de Javascript), en este articulo hablaremos sobre los template strings (plantillas de cadenas de texto) uno de los pequeños cambios que trajo con sigo ECMAScript 6, pero no por ello menos importante y que hace más agradable el trabajo...

  • Introducción a NodeJS

    Javascript es un lenguaje que en los últimos años ha tomado bastante peso en el desarrollo web gracias a los full Stack Developer Javascript, que no es otra cosa que un desarrollador que puede programar con Javascript del lado FrontEnd con Angular, del lado BackEnd con ExpressJS y su referente...

  • Clases, herencia y objetos en es6 (javascript)

    Con la llegada de ES6 (nuevo estándar de Javascript) se introdujo el concepto de clases y todo lo que conlleva trabajar con programación orientada a objetos, un cambio que necesitaba si o si Javascript desde hace tiempo, entre los temas que veremos en este articulo encontramos como trabajar con clases,...

  • Función arrow ES6 (javascript)

    Una de las novedades de Javascript en su estándar ES6 (ECMAScript 6) es el uso de las funciones arrow, entre las mejoras que incorpora este tipo de función es la mejora en la sintaxis del código (siendo más limpio y legible), así como el ámbito de las variables con las...

  • Introducción a ES6 (javascript)

    ECMAScript 6 mejor conocido por los desarrolladores como ES6 o ES2015 es el nuevo estándar para trabajar con Javascript, actualmente la mayoría de los navegadores modernos ya cuentan con un soporte bastante bueno para este estándar, es por eso que si te gusta trabajar con Javascript (que es lo más...

  • Un vistazo a Angular

    Angular es el resultado de la evolución de AngularJS (mejor conocido como AngularJS 1.x), si eres un desarrollador que viene de la versión anterior no te costara mucho trabajo adaptarte a la nueva si eres constante en el uso de las nuevas tecnologías que conlleva este framework (sobre todo si...