Saltar al contenido principal

SimpleHue Control Chrome Extension Workaround for Hue Bridge V2 API

· 2 min de lectura
Yayo Arellano
Software Engineer

After updating to the version 13.0.0 of the SimpleHue Control Chrome Extension, probably you started experiences issues. Unfortunately, the root cause lies with Philips Hue itself. Their SSL certificates are currently broken, rendering many Hue integrations (including the SimpleHue Control Chrome Extension) unable to communicate properly with the Bridge.

Version 13.0.1 of the SimpleHue Control Chrome Extension allows the user to select between API V1 or API V2

  • API V1: Compatible with older bridges.
  • API V2: Compatible with Hue Bridge Pro and older bridges, but we must follow the workaround in this article.

Workaround for API V2.

In this workaround we are going to tell the web browser to trust the self-signed certificate of the Hue Bridge. Your browser will display security warnings like the one shown in the image below.

These warnings can be safely ignored in this case, since the IP address you are connecting to belongs to your own Hue Bridge on your local network.

Agrega una sección de comentarios en Docusaurus usando commentbox.io

· 3 min de lectura
Yayo Arellano
Software Engineer

En este artículo, te mostraré paso a paso cómo agregar una sección de comentarios en tu blog de Docusaurus utilizando commentbox.io.

Requisitos previos

Configurar una cuenta en commentbox.io

Visita https://dashboard.commentbox.io para obtener tu ID de proyecto.

Visita https://dashboard.commentbox.io para obtener tu ID de proyecto.

  1. Copia tu ID de proyecto, lo utilizaremos más adelante para inicializar commentbox.io en nuestro proyecto Docusaurus.
  2. Durante el desarrollo, escribe localhost en el campo Website Domain. Cuando publiques en producción, asegúrate de que el Website Domain coincida con tu propio dominio, por ejemplo, en mi caso yayocode.com.

Porque decidí migrar de Next.js a Docusaurus

· 2 min de lectura
Yayo Arellano
Software Engineer

Durante los últimos dos años, mi blog ha sido un lugar para compartir mis experiencias y aprendizajes en el desarrollo de apps móviles, principalmente centrado en Flutter.

Inicialmente, decidí crear mi blog con Next.js porque es el Framework que utilizan en mi lugar de trabajo, y siempre he tenido curiosidad the aprender desarrollo web.

info

El blog creado con Next.js lo puedes encontrar aquí: Yayo Code Legacy NextJS Blog

Sin embargo, como cualquier proyecto de software, si no le damos mantenimiento constante, en unos cuantos meses estaremos usando dependencias desactualizadas. Asi que durante los últimos 3 meses decidí migrar el blog a Docusaurus. ¿La razón? Simplificación y eficiencia.

Comparar objetos en Flutter con el paquete equatable

· 4 min de lectura
Yayo Arellano
Software Engineer
Youtube video player

Youtube video player

En este artículo, vamos a ver cómo funciona la igualdad en Flutter y Dart y como el paquete [Equatable][1] nos ayuda a tener un código más limpio sin necesidad de escribir tanto código repetitivo.

Ya sabemos que si queremos comparar dos variables podemos usar el operador ==. Por ejemplo, si queremos comparar dos cadenas de texto, el código es:

  final car1 = "Toyota";
final car2 = "Toyota";
print(car1 == car2); // Resultado: true

Y si queremos comparar dos números, el código es:

  final phone1 = 52123456;
final phone2 = 52123456;
print(phone1 == phone2); // Resultado: true

Flutter Tip: Multiplicar en vez de dividir

· 2 min de lectura
Yayo Arellano
Software Engineer
Youtube video player

Youtube video player

Hay veces que queremos calcular el ancho o la altura de un widget y tomamos como referencia el espacio de pantalla disponible. Por ejemplo en el siguiente fragmento de código, la altura de cada Container es la mitad del tamaño de la pantalla o MediaQuery.of(context).size.height / 2.

Column(
children: [
Container(
color: Colors.blue,
height: MediaQuery.of(context).size.height / 2,
),
Container(
color: Colors.green,
height: MediaQuery.of(context).size.height / 2,
)
],
)

Como podemos ver cada container ocupa la mitad de la pantalla:

¿Qué hay de nuevo en Dart 3? Expresión switch, patterns, records, modificadores de clases, etc.

· 9 min de lectura
Yayo Arellano
Software Engineer

Dart, el lenguaje de programación desarrollado por Google, ha experimentado importantes mejoras y novedades con el lanzamiento de su versión 3. Esta actualización trae consigo características y funcionalidades que hacen de Dart un lenguaje más eficiente, moderno y fácil de usar para el desarrollo de aplicaciones web y móviles.

Dart 3 fue presentado por Google durante el Google I/O 2023 y fue anunciado como el lanzamiento más grande hasta la fecha.

100% Verificación de nulos (100% Sound null safety)

A partir de Dart 2.12, se introdujo una nueva característica llamada verificación de nulos (null safety). Esta característica tiene como objetivo principal mejorar la seguridad y la estabilidad del código al proporcionar verificaciones de nulos más sólidas. Si intentas asignar un valor nulo a una variable no nula, el compilador generará un error en tiempo de compilación. Esto ayuda a reducir la posibilidad de errores relacionados con nulos y a mejorar la robustez del código.

Ahora en Dart 3 el lenguaje ahora cuenta con un 100% de verificación de nulos.

Records

Una nueva característica de Dart 3 son los Records que permiten que un solo objeto pueda contener varios objetos. Un caso de uso es cuando queremos regresar dos o más valores de una función.

Anteriormente, cuando queríamos regresar más de un objeto de una función teníamos que crear una clase extra o agregar un paquete como Tuple.

El siguiente fragmento de código muestra que para regresar la edad y el nombre de una función tenemos que crear una clase llamada Usuario:

// Ejemplo sin usar records
void main() {

final usuario = obtenerInformacion();

print('Edad: ${usuario.edad}');
print('Nombre: ${usuario.nombre}');
}

Usuario obtenerInformacion() {
return Usuario(18, 'Yayo');
}

class Usuario {
final int edad;
final String nombre;

Usuario(this.edad, this.nombre);
}

Flutter Challenge: La mejor arquitectura | Flutter Taiwan

· 14 min de lectura
Yayo Arellano
Software Engineer
Youtube video player

Youtube video player

En este artículo vamos a resolver el reto propuesto en la página de Facebook Flutter Taiwán que básicamente dice:

El objetivo de este reto es reescribir el proyecto en la que tu creas es la mejor arquitectura (bloc, mvvm, mvc, mvp, etc.). Puedes usar cualquier paquete, debes incluir pruebas unitarias (unit test) y pruebas de widgets (widget tests). El proyecto se puede descargar de GitHub

note

Quiero aclarar que no existe una arquitectura que sea mejor que otra, en programación podemos llegar al mismo resultado de diferentes formas.

Analizando el proyecto actual (Sin arquitectura)

Primero vamos a ver la app corriendo:

Podemos ver que tenemos un app bar con el texto FlutterTaipei:), también hay un Listview con una serie de ítems que vienen de JsonPlaceHolder, el app bar también tiene unas opciones para ordenar la lista por id o por el titulo del artículo.