Para poder explicar la diferencia entre CSS y SCSS, debemos empezar por explicar qué es SASS.

Sass (Syntactically Awesome Stylesheets) 

Es un metalenguaje de hoja de estilos. Basado en SassScript, que es un lenguaje de script simple.

Este es un lenguaje de script que es traducido a CSS.
Y muchos lo definen como CSS con superpoderes. 
El intérprete de SASS traduce el código a CSS

En SASS tenemos dos sintaxis .sass y .scss 

CSS : es un lenguaje de hojas de estilo, sirve para organizar la presentación y aspecto de una página web, ya sea en un ordenador / computadora, un móvil / celular, una Tablet, etc

SCSS: Es la sintaxis de CSS pero con todas las ventajas de SASS.

La sintaxis de SCSS a diferencia de la sintaxis de Sass usa archivos con extensión .scss, a pesar de esto nos provee de las mismas características.

Variables, nesting (anidamiento), mixins, y herencia de los selectores.

Esta sintaxis suele ser la más utilizada ya que es muy parecida a la sintaxis de CSS.

Un ejemplo de sintaxis en SCSS sería:

@mixin square($size, $radius: 0) {
  width: $size;
  height: $size;

  @if $radius != 0 {
    border-radius: $radius;
  }
}

Tutorial para aprender formularios reactivos en Angular 8

Los formularios son parte esencial de nuestras aplicaciones.
En Angular tenemos dos enfoques de formularios, Template forms y Reactive Forms. 

Desde un login, un formulario para reservar un hotel, o formularios para realizar trámites gubernamentales. Cualquiera de estos formularios lo podríamos hacer con Reactive Forms. 

Aunque en una primera instancia para formularios más sencillos podríamos usar template forms.

Y para casos más avanzados podemos usar reactive forms.
Pero esto es solo son supuestos.

Los formularios reactivos utilizan un enfoque explícito e inmutable.

Los datos de dichos formularios están enlazados con nuestro objeto de manera sincrónica. 

Ya sabemos que tenemos dos opciones para trabajar con formularios en Angular; En esta ocasión me voy a centrar en los formularios reactivos.

Los formularios reactivos son más robustos (escalables) que los formularios template driven.

Si tu aplicación está basada en formularios, te recomiendo que utilizes formularios reactivos.

Bueno, basta de hablarte de las bondades de los formularios reactivos y vamos a ver un ejemplo. 

Vamos a crear un formulario de contacto básico. Y guardaremos cada consulta en Firebase Cloud Firestore.

Y por supuesto tendremos validaciones en nuestro formulario. 

Empecemos creando un nuevo proyecto de Angular.
Yo voy a utilizar Angular 8, pero este ejemplo es compatible prácticamente al 100% en otras versiones.

ng new reactiveForms

Para este ejemplo no necesitamos rutas.

Would you like to add Angular routing? (y/N)

Para los estilos escogemos SCSS

Asegurate de estar dentro de la carpeta del proyecto y vamos a crear un componente.  

Creamos un componente para pintar nuestro formulario. 

ng g c components/contact


• 

Vamos al componente principal app.component.html

Sustituye todo lo que hay ahora por lo siguiente.

<app-contact></app-contact>


Luego de este cambio podemos arrancar nuestro server.
ng serve

Ahora podemos acceder a la url http://localhost:4200/

Nada fancy hasta ahora, pero ya estamos listos para trabajar con nuestro formulario. 

Ahora que tenemos nuestra app y el componente creado.

Vamos a crearnos una aplicación en la consola de Firebase. 

Es necesario que tengas una cuenta ya creada de Firebase 

Primero vamos a https://console.firebase.google.com/

Verás algo como esto, es posible que tú lo veas distinto si no tienes ningún proyecto creado, como puedes ver yo tengo algunos proyectos. 

Haz clic en AÑADIR PROYECTO

Elige un nombre para tu proyecto -> aceptas las condiciones y Hacemos clic en CREAR PROYECTO

Luego de varias preguntas llegarás al proyecto. 

Podrás ver algo como esto.

En Firebase podemos trabajar con aplicaciones móviles Android e ios y por supuesto web. 

Vamos a hacer clic en icono de aplicaciones web (el tercero del recuadro).

Elige un nombre para registrar tu app.

Finalmente ya tenemos nuestra app creada, lo que  se puede ver en el pantallazo anterior, es la información que utilizaremos para conectarnos a Firebase. 

La parte importante para nosotros es el contenido de la variable firebaseConfig  

Asegurate de crear tu propia app.

Debemos crear una base de datos. 

En el menú de las izquierda selecciona Database y luego haz clic en Crear base de datos.

Elige:  Empezar con el modo de prueba Y por último haremos clic en Listo.

Una vez que ya tenemos los datos de configuración para conectarnos a firebase. 

Vamos a nuestro proyecto y en el fichero environment.ts

Vamos a realizar la instalación de las dependencia de firebase y @angular/fire 

Desde nuestra consola ejecutamos el siguiente comando.

Vamos a aprovechar las ventajas de los Schematics.

ng add @angular/fire

OJO, el proyecto debes estar creado en firebase console

Con este comando instalamos varios packages. 

Nota: Este tutorial está realizado en la versión 5.5.7 de firebase y 5.3.0 de @angular/fire 

Ahora vamos al fichero app.module para realizar unas importaciones. 

Importamos dos módulos de @angular/fire, el fichero de environment y el module que nos va permitir trabajar con formularios reactivos. 

En el apartado de imports inyectamos el módulo de formularios reactivos, el Firestore Module e inicializamos el AngularFire Module pasandole nuestro fichero de configuración.

Este sería el resultado final.

Necesitamos crear un service, para crear los métodos que vamos a utilizar para guardar las consultas de nuestro formulario. 

Desde la consola ejecutamos el comando 

ng g s services/data

Ahora abrimos el fichero data.service.ts

Y realizamos las siguientes importaciones. 

A continuación declaramos una propiedad contactCollection

En el método constructor le asignamos nuestra colección contacts, que será donde guardaremos la información. 

Creamos el método saveMessage, para guardar en nuestra colección. 

Este sería el resultado final del data.service.ts 

En el componente

En el componente contact.component.ts

Este sería el resultado final del fichero,  a continuación paso a comentar los más destacado. 

En la línea 2 & 3 hago las importaciones del DataService y también necesitamos importar FormControl, FormGroup & Validators para trabajar con el módulo de formulario reactivo. 

Creamos una propiedad llamada contactForm de tipo FormGroup.

La propiedad emailPattern, es tan solo una Regex para validar si el usuario ha introducido una email válido.

Luego, lo más destacable puede el método createForm donde creamos la instancia del formulario y asignamos la validaciones pertinentes. 

Las propias validaciones en sí, son muy descriptivas. 

Todos nuestros campos serán requeridos y con el método minLength(), indicamos el número mínimo para este campo.  

También tenemos un método para hacer el reset de nuestro formulario, y onSaveForm para llamar el método saveMessage y le pasamos todo nuestro formulario. 

Procedemos a trabajar con el HTML. 

En el fichero contact.component.html
Vamos a tener el html. Aquí no hay mucho que explicar. 

Los más reseñable es la linea 3
<form [formGroup]="contactForm" (ngSubmit)="onSaveForm()">

Donde enlazamos nuestra instancia con el formulario.
Y cuando ocurre el evento onSubmit llamamos al método onSaveForm.

Si arrancas la aplicación verás que no luce muy bien. 

Vamos a añadir estilos. Este será el resultado final y recuerda que tienes el repo, donde puedes copiar estos estilos. 

Arranca el server y vamos a probar nuestra app.

Como puedes ver el resultado es un formulario básico, que guarda las consultas en Firebase.

Tienes la demo aquí

Si quieres ver el video en Youtube, te dejo el link por aquí, también tienes el código aquí

Un saludo y no olvides compartir. Gracias!!!

Para bien o para mal, vivimos en un época donde el acceso a tanta información puede llegar a ser abrumador.

Y en el campo de la enseñanza online puede ser uno de los sectores donde existen más información y la verdad que muy buena información y a veces cuesta dar con el lugar preciso para empezar un curso de Angular en este caso.

Aprender desarrollo web con Angular, es una oportunidad para poder acceder a un mejor empleo.

Es por este motivo que voy a darte unos tips para que puedas empezar en el universo Angular.

No existe (de manera oficial) ninguna certificación Angular. Así que te tienes que organizar para empezar a aprender este framework.

Udemy, es una de las plataforma de enseñanza online más destacadas del mundo.

Existen cursos en casi todos los idiomas.

Aunque es una plataforma de pago, existen algunos curso online gratis.
En este link te comparto algunos cursos de Angular 5 gratis en Udemy para aprender Angular desde cero.

Ten en cuenta que estos cursos pueden variar su estado y dejar de ser gratis.

Otra fuente inagotable de conocimiento es Youtube, existen muchos canales enfocados a la enseñanza de desarrollo web.

Vamos a compartir un top 3, de canales donde puedes aprender Angular en Castellano.

Nicobytes

Nicolas molina, explica de manera clara y concisa.

Y los temas que suele tocar son muy difíciles de hallar de manera gratuita.  

Visita el canal de Nicobytes

Dominicode

A parte del curso de Angular 7 desde cero a avanzado.
También dominicode es un canal de Youtube donde se puede aprender de manera gratuita Angular y Firebase.

No deje de echarle un vistazo

Visita el canal de Dominicode

Jorge Cano

Jorge, es uno de los developer en Angular más activos de toda la comunidad.

Creo que vale la pena echarle un vistazo.

También me gustaría aconsejarte que no dejes de visitar la web oficial de Angular.
Leer la documentación de las tecnologías siempre nos ayudará.  

Existen muchas dudas sobre cual framework Javascript escoger para nuestro proyectos o incluso cual aprender.  

No te imaginas la dicha que tenemos, al poder elegir entre muy buenos frameworks.

Hay una especie de “guerra” entre Angular, React y en menor medida Vue.js.

Es normal tener la duda de hacer un curso de React o un curso de Angular 7.

Yo, voy a destacar ventajas de Angular, eso no quiere decir que sea mejor a los otros.

Así qué lo primero que siempre recomiendo es : Si puedes aprende Vue, React y Angular.

¿Qué es Angular?

Angular es un framework Javascript que se utiliza para el desarrollo de aplicaciones web, escritorio y móviles.

El desarrollo de aplicaciones con Angular implica el uso de Typescript, que es un superconjunto de Javascript, junto con HTML, CSS, etc.

El código escrito en Typescript se compila en Javascript y se representa en el navegador.

Angular es uno de los framework de Javascript más populares para crear aplicaciones web.

Podríamos decir que existen dos Angular, su versión 1.x (AngularJS) y Angular a secas, que empezó en la versión 2.

AngularJS no tiene nada que ver con las 2, 4 5, 6, 7, 8. Son totalmente distintas.

Por el momento el equipo de Angular lanza dos versiones al año.

A partir de la versión de Angular 4, podríamos decir que Angular obtuve cierta madurez y ha ido recuperando la confianza de los desarrolladores.

• 

Ventajas de usar Angular

Hay varias ventajas de usar Angular, vamos a enumerar algunas de ellas.

Single Page Application

Angular soporta aplicaciones de una sola página.

Las aplicaciones de una sola página son un tipo de aplicaciones web que cargan una sola página HTML, y la página se actualiza dinámicamente de acuerdo con la interacción del usuario con la aplicación web.

Las aplicaciones de una sola página, también conocidas como SPA, pueden comunicarse con los servidores back-end sin actualizar la página web completa, para cargar datos en la aplicación.

Los SPA proporcionan una mejor experiencia de usuario ya que a nadie le gusta esperar demasiado tiempo para volver a cargar la página web completa.

Two-way data binding

Desde la versión 2, tenemos el Two-way data binding, que podríamos decir, que es la manera en Angular conecta nuestro view con el model.

Son propiedades que podemos declarar en la lógica de nuestra aplicación. Y podemos actualizar desde la vista de app.

Cuando se actualiza el almacén de datos, la interfaz de usuario también se actualiza inmediatamente.

Para su implementación debemos usar la directiva ngModel.

Modularidad en angular

Piensa en la modularidad en Angular como si el código estuviera organizado en “bloques”. Estos bloques son conocidos como “módulos” en Angular.
El código de la aplicación se divide en varios módulos reutilizables.

Un módulo tiene componentes, directivas, pipes y servicios, etc.
Estos módulos se pueden combinar entre sí para crear una aplicación.

Los módulos también ofrecen varios beneficios. Una de ellas es la carga diferida (Lazy loading), es decir, una o más funciones de la aplicación se pueden cargar bajo demanda.

Si se usa correctamente, la carga diferida puede aumentar mucho la eficiencia de una aplicación.

Las aplicaciones empresariales pueden crecer mucho, y por lo tanto, dividir la mano de obra en varios equipos podría ser un desafío. Con los módulos, el código se puede mantener organizado y la división del trabajo se puede hacer correctamente manteniendo la consistencia del código.

Interfaz de usuario declarativa

Angular utiliza HTML para definir la interfaz de usuario de una aplicación. HTML es intuitivo, declarativo y menos complejo que Javascript.

En una interfaz de usuario declarativa, la lógica de presentación está separada de la lógica imperativa. No debemos preocuparnos por el flujo del programa ni por el orden de carga de los componentes en la página web. Simplemente podemos definir el diseño de la página, dejar claro dónde se están enlazando los datos y a qué se está enlazando. Angular se encargará del resto.

Fácil integración

La integración angular está pre-integrada en varios marcos, por ejemplo, Ionic, Kendo UI de Telerik, Wijmo, etc. Por lo tanto, la integración de funciones de terceros es fácil con Angular. Por lo tanto, si desea agregar algunos componentes de interfaz de usuario de alta calidad, puede hacerlo fácilmente utilizando cualquiera de los frameworks mencionados anteriormente.

Multi-plataforma

Angular se puede utilizar para realizar cualquiera de los siguientes tipos de aplicaciones:

Aplicaciones web: Angular se puede utilizar para el desarrollo web.
Además, desde Angular 5 en adelante, también se pueden desarrollar aplicaciones web progresivas.
Estas aplicaciones tienen un alto rendimiento y pueden funcionar fuera de línea también.

Aplicaciones móviles nativas: Las aplicaciones móviles nativas pueden construirse usando Angular.

Aplicaciones de escritorio: Angular se puede usar para crear aplicaciones instaladas en el escritorio para Mac, Windows y Linux.

Estas son algunas de las ventajas de realizar un Curso de Angular, al momento de escribir este artículo se acaba de lanzar la versión 8 de Angular, pero yo recomiendo que empieces por aprender la Angular 7.

Recuerda que puedes aprender Angular 7, en nuestro canal de Youtube ó en nuestro curso premium de Angular 7, desde cero a avanzado.

Conociendo Angular 7

El mundo del frontend se encuentra en un punto de madurez increíble.

Angular, React y Vue controlan el mercado del front.

Si, ya conoces algunos de Vue o React y aun no has dado el paso para Crear tu primera aplicación con Angular, estás en el lugar adecuado para empezar.

Vamos al lío.

Angular requiere Node.js. Así que para poder empezar hace falta que tenga instalado Node.js

Puedes comprobar si lo tienes instalado desde tu terminal / consola

En caso de no tenerlo instalado puedes descargarlo desde su web oficial Node.js

Ahora vamos a instalar el CLI de Angular de manera global.

<code>npm install -g @angular/cli</code>

Es posible que tengas que ejecutar este comando como administrador.

Estamos listos para empezar a trabajar con Angular, en este caso utilizaremos la versión 7.

Dirígete a la ruta donde deseas crear tu app.

ng new tuApp

Verás que la consola te hará varias preguntas. la primera es si deseas añadir rutas a tu aplicación de Angular.

Para este ejemplo diremos que No. Y presionamos enter

La siguiente pregunta es cual la hora de estilos que deseamos utilizar.

En Angular, podemos utilizar CSS, Sass, Scss, Less y Stylus.

Para nuestro ejemplo, podemos elegir cualquiera de las opciones.

Y empieza nuestro la creación de nuestro proyecto y la instalación de nuestras dependencias.

Ahora tenemos una carpeta con el nombre de nuestro proyecto.

vamos a acceder a nuestra carpeta.

No te dejes intimidar por la cantidad de carpetas y ficheros.

Si llevas la carpeta a un editor de código, lo podrás ver mejor.

Si quieres saber más sobre algunos de estos ficheros te dejo este video donde te lo explico.

Ahora vamos a arrancar nuestra aplicación de Angular 7.

Vuelve a tu consola y ejecuta el comando

<code>ng serve -o</code>

Este comando arrancará nuestro servidor local, y abrirá una pestaña en nuestro navegador

y tendremos nuestra primera aplicación en Angular 7.

Si te ha sabido a poco este breve tutorial, recuerda que tenemos un curso de Angular 7.

Empezamos el año 2019 con una ¡gran noticia! Github siempre ha tenido repositorios privados como parte de suscripción de pago.
Tenías repositorios gratis y si querías tener repositorios privados tenias que pagar.

¡Ahora, las cuentas gratuitas pueden crear repositorios privados de forma gratuita y puedes añadir hasta 3 colaboradores!

Cuando Microsoft adquirió Github, prácticamente todo el sector, se mostró nervioso.
Ya que, no sabíamos qué pasaría o cuales cambios se avecinan.

Incluso antes de que Microsoft comprara GitHub, han estado realizando algunos movimientos impresionantes en un sólido compromiso con el código abierto.

He sido muy “hater” de Microsoft durante mucho tiempo.
Pero debo reconocer la gran labor que está llevando acabo Microsoft para los desarrolladores.

Si eres de los que se mudó a Gitlab o Bitbucket, cuando Microsoft adquirió Github, ahora es un buen momento para volver.

¿Qué tienes en la cuenta gratuita?

• Repositorios públicos ilimitados
• Repositorios privados ilimitados
• 3 colaboradores para los repositorios privados
• Issues y bug tracking

[embedyt] https://www.youtube.com/watch?v=IeluJqoiCcA[/embedyt]

Que es git?

Git es un software de control de versiones diseñado por el creador de Linux, (Linus Torvalds) pensando en la eficiencia y en el mantenimiento de versiones de aplicaciones cuando éstas tienen un gran número de archivos de código fuente.

No voy a entrar a explicar en detalle como Git, modela los datos.

Para que sirve git?

Podemos decir que Git, hace una “copia” del proyecto, cuando confirmas un cambio, o guardas el estado del proyecto en Git, básicamente hace una foto del aspecto de todos tus archivos en ese momento, y guarda una referencia a esa instantánea.

Tú decides cuando deseas hacer una foto a tu código, y esto se realiza mediante un “commit”.

Ventajas:

• La fácil distribución del código.
• Facilidad para coordinar el trabajo entre multiples desarrolladores.
• Podemos saber quién y cuando se han hecho cambios.
• Revertir a versiones anteriores

Git está disponible para los tres grandes sistemas operativos, Linux/Unix, Windows y Mac OS X.
En esta breve introducción yo voy a utilizar Mac.

Descargar & Instalar Git en Mac

(more…)

[embedyt] https://www.youtube.com/watch?v=qsejysrhJiU[/embedyt]

Con cinco millones de usuarios, Postman es la plataforma de pruebas y desarrollo API más popular del mundo.

Como desarrolladores tenemos cientos de tools, que nos ayudan a
ser más productivos en nuestras tareas diarias.

Pero siempre existe alguna herramienta, que es practicamente esencial para todo desarrollador.

Dejando de lado stackoverflow, la app que utilizo a diario es Postman.

Como usar postman

Postman nos ayuda a ser más eficientes durante todo el ciclo de vida de desarrollo de una API.
El apartado de testing y debugging, con Postman no lo vamos a ver en esta entrega.
Ya que esos dos apartados de Postman ameritan un entrega completa.

Hoy en día las API RESTful están en todas partes, no importa la tematica de la aplicación, ni su tamaño.
Y al mismo tiempo son cada vez más complejas: métodos HTTP, headers, cookies, autenticación, tokens, OAuth y mucho más.

(more…)

De seguro, que alguna vez haz escuchado hablar sobre el MutationObserver, o las mutaciones del DOM en JavaScript.
Cada día las peticiones de nuestros clientes o las necesidades de nuestras aplicaciones son más exigentes.
Con lo cual debemos estar a la altura de dichos requerimientos.

Esta Web API, nos ayuda a detectar cambios en el DOM.
Podremos saber cuando se añade o elimina un elemento en el DOM, si se modifican atributos de los elementos, si hay cambios en el textContent de dichos nodos.
O incluso si hay cambios en los hijos de los elementos.

MutationObserver es una nueva API de los navegadores modernos, y viene a reemplazar al antiguo metodo MutationEvents, el cual ya está obsoleto.

El metodo MutationObserver

(more…)

Ya hemos trabajados con las cookies en php7 y ahora es el turno de las sesiones.

Una session es una manera de almacenar información en una variable para ser usada en multiples páginas de tu aplicación.

Cuando almacenamos en la variable session, podemos acceder a esta desde $_SESSION que es un array asociativo.

1 – Iniciando session:
Para iniciar una session en PHP, podemos utilizar la función session_start().

 

2 – Eliminar una session de PHP:
Para borrar una session de PHP, debemos usar la función unset().
Podríamos decir que unset() destruye las variables especificadas.

 

3 – Destruir session PHP:
Destruir un session en PHP, significa borrar TODAS las variables, de la session actual.
Esto lo debemos hacer con la función session_destroy().