Una acción necesaria en toda app es la comunicación con servicios REST, en este post voy a tratar de resumir lo más posible esta tarea.

Image for post
Image for post

1. Dependencia

Lo primero que necesitamos es agregar el paquete http como dependencia en nuestro archivo de configuración pubspec.yaml

dependencies:   
http: ^0.12.2

2. Conectar servicio

Para este ejemplo vamos a usar la ya conocida web JSONPlaceholder para obtener los datos de un álbum con el método get()

Ahora importamos el paquete http:

import 'package:http/http.dart' as http;

y enlazamos la app con nuestro servicio de jsonplaceholder

El método http.get() devuelve un Future que contiene un Response.

Image for post
Image for post
  • Future es una clase de Dart para trabajar con operaciones asíncronas. Es usado para representar un valor o un error. …


Ya se está haciendo común en nuestro medio el uso de los términos CI/CD pero ¿Qué es exactamente? y ¿Cómo lo puedo aplicar a mi proyecto?

Image for post
Image for post

Traduciendo quiere decir Integración Continua (CI) y Distribución Continua (CD) que resumido no es más que un flujo de desarrollo y despliegue. Hay mucha teoría sobre esto por toda la web y de seguro ya viste muchas veces la siguiente imagen que lo explica mucho mejor.

Image for post
Image for post
Fuente: codilime.com

Pues bien, para este ejemplo tenemos un proyecto de Angular. Lo vamos a almacenar en un repositorio de Github y luego a publicar en gh-pages. Hasta aquí no es nada del otro mundo y es más, ya lo había hecho antes pero de manera manual. Allí es donde entra en escena Github Actions, pues con solo hacer un git push en nuestra rama master todo se ejecutará automáticamente por nosotros. …


Luego del Hacktoberfest 2020 del mes pasado, ahora Itch.io y Github nos retan a crear un juego durante el mes de Noviembre. Veamos los detalles.

Image for post
Image for post

Game Off es un evento anual, donde los participantes pasan el mes de noviembre creando juegos basados ​​en un tema secreto. Participa de forma individual o en equipo. Las herramientas que puedes usar son infinitas, puedes usar lo que mejor domines o bien aprender algo nuevo.

El tema del Game Off de este año es MOONSHOT

Cómo participar

  1. Crear un juego basado en el tema
  2. Entrar en el GameOff2020 en itch.io y crearte una cuenta
  3. Crea un nuevo repositorio público de GitHub para almacenar tu código fuente y sube tus cambios antes del 1 de diciembre. …


En un post anterior comenté como enviar datos a Google Sheets, y hace poco un colega me consultó ¿Y cómo hacer lo opuesto? 🧐

Image for post
Image for post

Pues bien, hay muchos usos para este ejercicio, en más de una ocasión he usado un archivo de Google Sheets para administrar una landing o parte de ella que no involucre un desarrollo backend de por medio, ya que en la oficina siempre “todo es para ayer”.

Veamos los pasos necesarios:

  1. Creamos un archivo en Google Sheets
Image for post
Image for post

2. Publicamos el archivo en el menú Archivo>Publicar en la web

Image for post
Image for post


Todos hemos llegado a un punto el que trabajamos con fechas y una parada obligatoria trabajando con Angular es usar este Pipe.

Image for post
Image for post

Lo primero que hacemos es obtener la fecha con la que vamos a trabajar:

Image for post
Image for post

Luego la mostramos usando el pipe date

Image for post
Image for post

Como en la segunda línea, podemos usar diferentes formatos como las siguientes:

Formato     Equivale              Salida
---------- -------------------- --------------------------------
short M/d/yy h:mm a 6/15/15 9:03 AM
medium MMM d y h:mm:ss a Jun 15 2015 9:03:01 AM
long MMMM d y h:mm:ss a z June 15 2015 at 9:03:01 AM GMT+1
shortDate M/d/yy 6/15/15
mediumDate MMM d y Jun 15 2015
longDate MMMM d y June 15 2015
fullDate EEEE MMMM d y Monday June 15 2015
shortTime h:mm a 9:03 AM
mediumTime h:mm:ss a 9:03:01 AM
longTime h:mm:ss a z 9:03:01 AM GMT+1
fullTime h:mm:ss a zzzz 9:03:01 AM…

Como desarrollador sabes que en este mundo, cuando ya estás dominando una herramienta sale otra y hay que adaptarse al continuo cambio.

Image for post
Image for post

Pero a su vez también salen mejoras y versiones nuevas que nos hacen la vida más fácil. Solo quiero comentar algunas características que considero más resaltantes de la nueva versión de Javascript.

1. Bigint

Es un nuevo tipo de dato primitivo. Permite trabajar con números enteros grandes. El número más grande que javascript puede manejar es 2⁵³, que podemos ver con Number.MAX_SAVE_INTEGER

const max = Number.MAX_SAFE_INTEGER;
console.log(max);
//9007199254740991

2. Dynamic import

A veces importamos librerías que usamos con poca frecuencia y aquí estamos perdiendo recursos. Ahora con async/await podemos importar dinámicamente nuestras dependencias solo cuando las necesitemos. …


El Hacktoberfest 2020 inicia el 1 de Octubre y si quieres participar mínimo debes saber cómo hacer una contribución a un proyecto en Github. Trataré de explicarlo lo más sencillo posible.

Image for post
Image for post

Hacktoberfest ® Es un evento anual que celebra e impulsa el desarrollo open source a nivel mundial durante todo el mes de Octubre. Pueden participar todos, desde principiantes hasta los master daster, uds entienden.

Vamos a ver los pasos necesarios para hacer tu primera contribución.

En la web oficial del Hacktoberfest hay unos enlaces de algunos repositorios como para que te vayas iniciando y haciendo pruebas, dejaré el link al final del post. …


Algunos de los siguientes atributos ya son conocidos, otros tal vez no, como 7 es mi número favorito, te voy a mostrar solo 7 atributos que quizás no estás usando y deberías usar.

Image for post
Image for post

1. contenteditable

Este atributo especifica si el contenido de un elemento es editable o no

<p contenteditable="true">mi texto</p>

2. download

Este atributo pertenece a la etiqueta <a> y especifica que el destino se descargará cuando el usuario haga clic en el vínculo.

<a href="./files/archivo.pdf" download>Descargar archivo</a>

3. hidden

Como su nombre lo indica, con este atributo el contenido del elemento permanecerá oculto.

<p hidden>Este texto está oculto</p>

4. multiple

Este atributo pertenece a los elementos input y select. Permite al usuario elegir más de una opción. …


En más de una ocasión haz trabajado con algún servicios web y sabes que el tiempo de respuesta es indeterminado. Una buena práctica es indicar al usuario que se está realizando una acción y en este post vamos a realizar un ejercicio práctico.

Image for post
Image for post

He iniciado un proyecto en angular y he instalado angular material

npm i @angular/material --save

No olviden importar los estilos en el root del proyecto

@import '@angular/material/prebuilt-themes/deeppurple-amber.css';

He creado un módulo propio para trabajar los componentes de material y para este ejemplo solo voy a utilizar 2: button y progress-spinner

Image for post
Image for post

A quién no le han pedido alguna vez entregar un reporte del rendimiento de una web. Y si ya te ha tocado realizarlo seguro ya pasaste por muchas webs como gtmetrix.com o por la ya mencionada PageSpeed Insights de Google.

Image for post
Image for post

Hace un par de meses me pidieron generar un reporte semanal del rendimiento de la web, con 3 aspectos principales:

  • Tiempo de carga de la web
  • Tamaño de la web en Mb
  • Número total de peticiones requests

Cada semana tenía que entrar a estas páginas para generar un reporte y si se quiere trabajar con más de una web la tarea toma más tiempo. …

About

Kike Sanchez

Senior Frontend Developer Analyst at Grupo Marathon. Javascript lover and on the way of continuous learning.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store