Saltar al contenido

Categoría: Desarrollo y Programación

Usar el tema claro en el editor de código es mejor y te explicó por qué

Hace unas semanas Brent Roose publicó un vídeo de por qué considera mejor un tema claro en los editores de código. Me llamó la atención su opinión y los artículos que compartió que decidí intentarlo. Ya al segundo día, había notado los cambios y no volví a usar el tema oscuro exceptuando en la terminal (empecé a usar computadoras en los tiempos de MS-DOS y para mí la terminal siempre será con fondo oscuro).

El reconocido meme entre los programadores sobre el miedo a usar un editor con tema claro.
El reconocido meme entre los programadores sobre el miedo a usar un editor claro.
Fuente: @programming_tips

¿Usar un tema claro es mejor para mis ojos?

Hace tiempo leí que los temas oscuros eran mejores porque las pantallas no iluminaban tanto ni cegaban la vista, ocasionando cansancio con el tiempo. Pero al parecer sólo es válido para monitores viejos de tipo CRT. Pero viendo la entrada de Brent Roose, en él comparte enlaces a varios artículos y estudios donde muestran que el ojo humano está acostumbrado a reconocer patrones oscuros sobre fondo claro. Por ejemplo, el ojo al ver algo oscuro va a tardar mas en procesarlo que en fondo blanco, pero en cambio, cuando hay colores fuertes sobre fondo oscuro, la información queda mejor grabada en el cerebro. Pero en el caso de programar, nos interesa es tener menor cansancio y ser productivos durante el día.

Para mayor información del tema, te recomiendo leer el artículo sobre el lado oscuro del modo oscuro y el estudio sobre el efecto de mejores visualizaciones en la comprensión de código fuente.

Si aún no te convences, fíjate en la siguiente imagen extraída del artículo anterior. Cómo es mas fácil de reconocer el rostro de la derecha porque la información que necesita nuestro está en color oscuro y con fondo claro. Si aplicas esta lógica para el código, veras como nuestro cerebro necesita menos tiempo para reconocer texto oscuro en fondo claro. Suma ese tiempo a lo largo del día, cada vez que haces desplazamiento del texto o cambias de ventana, al regresar al editor y leer el código, estarías ahorrando un tiempo.

Es mas fácil distinguir al Abraham Lincoln
El rostro de la derecha es mas fácil y rápido de reconocer que de la izquierda. Fuente: Tidibits

Al ver este ejemplo, me convencí de que es mejor tener la tipografía oscura sobre el fondo blanco. Inicialmente era probarlo por una semana pero ya al segundo día vi mejoras y me quedé usándolo.

Mi experiencia usando el tema claro luego de una semana

El cambio mas inmediato que noté fue que al cambiar entre el editor y el navegador. Como la mayoría de las páginas suelen ser fondo claro con letras oscuras. No hay cambio brusco de colores al cambiar de aplicaciones. Imagino que si usas todo en modo oscuro pasa lo mismo, pero la web es clara por defecto y no todas las aplicaciones tienen un modo oscuro.

Durante la semana, si noté menos cansancio lugar de mirar la pantalla luego de varias horas usando el tema claro. El hecho de bajarle el brillo al monitor al principio porque me encandilaba el fondo blanco, posiblemente ayudó a reducir el agotamiento visual. Porque ahora la pantalla no necesitaba tanto brillo para mostrar el contenido a diferencia de cuando el modo oscuro es usado. También indirectamente esto debería disminuir el consumo eléctrico del monitor al requerir menos brillo.

Respecto a los colores del código, no vi ningún cambio porque a pesar de ser diferentes, resaltan la misma información. Durante las primeras horas me costó el cambio pero luego de me adapté.

En mi opinión, si vale la pena cambiar a un tema claro y si siento que me descansa mas la vista al durar varias horas en él. La adaptación me llevó dos días y luego me pareció normal el nuevo esquema de colores.

¿Cuando no recomiendo usarlo?

En monitores antiguos de CRT siento que se cansa mas la vista usando un tema claro, porque hay mas brillo en la pantalla. Pero si tienes un monitor moderno no ocurre lo mismo.

Sin embargo, si tienes una pantalla OLED y necesitas ahorrar batería, usar el modo oscuro puede darte de 3% a 9% mas tiempo de energía. Podría no parecer una cifra significante, pero si estas en una emergencia laboral y no tienes suministro eléctrico. Ese tiempo adicional es valioso.

Otro punto donde no recomiendo, es al momento de explicar o hacer presentaciones. El hecho de usar un fondo oscuro con letras de colores, facilita que se guarde la información del contenido de las palabras. Ahí no importa la velocidad de procesamiento de la información sino que resalte y se almacene en las personas que ven el código.

Recomendaciones finales

Te recomiendo probar durante una semana usar un tema claro. Recuerda que si sientes que te estas cegando de tanta luz, entonces significa que debes bajar el brillo de la pantalla y mejorar la iluminación de la habitación/oficina. Luego en un par de horas es probable que te acostumbres y sientas la diferencia.

¡Pruébalo y mejora tu salud visual!

3 comentarios

Comprobar si una pasarela de pago esta activa en WooCommerce

Si en WooCommerce necesitas comprobar si una pasarela de pago esta activa. Puedes obtener un listado de las pasarelas de pago (gateways) disponibles en el sitio con la función:

WC()->payment_gateways->get_available_payment_gateways();

El problema de esta función es que estas instanciando WooCommerce y en algunos casos, algunas pasarelas dejan de registrarse o se esconden por motivos de seguridad. Esto hace que fallen mas adelante cuando realmente deben mostrarse en el checkout. Además, si necesitas comprobar si una pasarela pago está activa en un momento donde no se ha cargado WooCommerce. Necesitas una alternativa a esta función

Comprobar si una pasarela pago está activa desde la base de datos

Una alternativa segura es consultar la información directamente desde la base de datos. Así no necesitas implementar o instanciar objetos. El costo de la consulta es mínimo y queda en caché para futuros accesos (si se usa $wpdb).

WooCoommerce guarda la información de una pasarela de pagos en la base de datos en la tabla options bajo el nombre «woocommerce_idDelGateway_settings». Si el id de tu pasarela es «pagos_con_tarjeta» entonces la información se guarda bajo el nombre woocommerce_pagos_con_tarjeta_settings.

Como la información se guarda en formato JSON. Sólo necesitamos contar el registro bajo el nombre anterior que tenga el valor enabled: true dentro del contenido del JSON.

Para ello hacemos la siguiente función que buscará si existe el valor o no:

function is_enabled($gateway_name) {
  global $wpdb;

  $query = "SELECT COUNT(*)  FROM $wpdb->options "
    . "WHERE `option_name` ='woocommerce_${gateway_name}_settings' "
    . "AND  `option_value`  LIKE '%\"enabled\";s:3:\"yes\"%'";

  $count = $wpdb->get_var( $query );

  return $count > 0;
}

Esta función dependiendo del contexto, puedes ponerla en el archivo functions.php o en el código de tu plugin. Puedes llamarla en cualquier momento ya que $wpdb se instancia temprano en la carga de WordPress.

¡Listo! Con esto podrás leer directamente desde la base de datos si comprobar si una pasarela pago está activa o desactivada. Sin afectar el funcionamiento de WooCommerce.

Deja un comentario

JS Archive List 5.0

Luego de mas de 3 años sin poder dedicar tiempo a mi primer plugin de WordPress: JS Archive List. Finalmente he conseguido trabajar en él y lanzar una nueva versión. La idea era actualizarlo a las últimas tecnologías, realizar mantenimiento y corrección de errores.

Nuevo nombre: JS Archive List Widget

Ya hoy en día no es necesario usar jQuery debido a que los navegadores ofrecen nativamente las funcionalidades básicas de jQuery. A pesar de que WordPress lo sigue incluyendo y la mayoría de temas y plugines lo cargan (causando una descarga adicional de código) eventualmente se dejará de usar y es mejor estar preparado para ello.

Para preparar el plugin ante este cambio y para actualizarlo a las últimas tecnologías, eliminé jQuery de las dependencias. Esto requirió rescribir todo el código de Javascript a nativo sin dependencias de librerías. Prácticamente es escribirlo de nuevo, es una tarea fácil para el código de interacción con el DOM pero la parte de animaciones si tocó estudiar CSS y ver como aplicar la parte de animaciones usando sólo CSS.

Por esta razón, eliminé jQuery del nombre (que era MUY popular cuando este plugin se lanzó por primera vez) y ahora lo dejé simplemente a JS para indicar que está hecho en Javascript.

Soporte a Gutenberg

Mi objetivo pendiente con este plugin era darle soporte a los bloques, la nueva forma de configurar los widgets y de añadir contenido a WordPress. Por mas que no quieran algunos, el futuro de este CMS consiste en crear contenido a través de bloques de Gutenberg. Tarde o temprano tenía que añadir soporte a esta tecnología.

Para este plugin, debía crear un bloque desde 0 para mostrar el formulario que permite configurar el widget. Luego hacer un adaptador de la configuración de Gutenberg a la que uso internamente (y para mantener retrocompatibilidad) y al momento de generar el código HTML que se carga en el sitio, llamo a la función que genera el HTML del widget.

Fue interesante aprender este proceso de crear bloques. También es raro escribir plugins de WordPress usando React y tecnologías de JS. La ventaja es que los plugines quedan mejor integrados al CMS y creo que permite a los usuarios configurarlos fácilmente.

¿Cómo lo descargo o pruebo?

Si te interesa este plugin, en esta página en el lado izquierdo puedes ver la sección de Archivos. Esta parte se genera con JS Archive List Widget y así es una de las formas que puedes configurar el plugin para mostrar los archivos.

Para descargarlo y usarlo en tu instalación de WordPress, haz clic a continuación y disfruta de ver el listado de tus archivos con JS Archive List Widget.

Ahora tengo que actualizar mi plugin de categorías y evitar que tome 3 años lanzar una nueva versión.

Deja un comentario

Mi análisis sobre Go Subscriptions (Shopify)

Estuve probando Go Subscriptions una aplicación embebida de Shopify que te permite agregar suscripciones a tu tienda. Esto te permite definir productos o servicios que pueden venderse cada cierto tiempo de forma automática. Así tus clientes no tienen que regresar a la tienda para volver a adquirirlos sino que se al finalizar el período se vuelve a cobrar y se envía de nuevo el producto.

Instalación

La instalación depende del tipo de tema que tengas. Go Subscriptions tiene compatibilidad con Online Themes 2.0. Así que con instalar la aplicación y activar el bloque en la configuración del tema estará la listo para usarla Si tienes la versión 1.0. Te aparece una serie de instrucciones sobre donde debes pegar el código de los botones para enlaces o mostrar la información de suscripciones. Tal vez puede ser un poco tedioso pero es lo normal para este tipo de temas.

Para ambos casos, la misma aplicación te informará los pasos requeridos para instalar la aplicación en tu tienda. Si no, puedes usar el soporte técnico para requerir una instalación asistida pero no fue necesario en mi caso.

Administrador de Go Subscriptions

Como administrador puedes hacer todas las operaciones de una orden: pausar, reanudar, cambiar fechas, productos, ítemes, etc. Pero también puedes realizar configuraciones como definir el contenido de los correos, definir las suscripciones: períodos, descuentos, envíos, etc.

Para empezar a usar Go Subscriptions, primordial es crear planes de pago que poseen un período, descuentos, los productos a los que pertenece, entre otros. Luego de crearlos aparecerán en el frontend y el usuario puede seleccionar el producto como suscripción. Posteriormente a medida que van colocando suscripciones, aparecerán en el listado de orden donde puedes controlarlas.

También con la aplicación puedes activar correos con recordatorios de renovación de la suscripción o información adicional. Otras funciones adicionales son controlar la veces que una suscripción debe ocurrir para ser cancelada, el número de re-intentos antes de pausar le suscripción entre otros.

La interfaz es sencilla de usar y con la misma apariencia que la mayoría de las aplicaciones de Shopify. Tiene soporte para español y funciona en dispositivos móviles.

Administrador del Frontend

El administrador para los clientes de la tienda, permite a los usuarios ver las suscripciones realizadas y ejecutar acciones sobre ellas. Las acciones permiten pausar, reanudar, omitir la siguiente orden. Ademas poder cambiar el método de pago, cancelar toda la orden y hacer cobros manuales.

La interfaz es muy sencilla y adaptable a cualquier plantilla que uses. El HTML es sencillo y con pocas reglas de CSS por defecto. Así que para personalizarlo a tu gusto, con un poco de CSS adicionales puedes adaptarlo sin problemas.

Este administrador le da libertad a tus clientes de controlar sus suscripciones.

Conclusión

Si necesitas aumentar tus ventas ofreciendo suscripciones, te recomiendo usar Go Subscriptions. Es una aplicación una aplicación sencilla pero hace todo lo que necesitas. El equipo de soporte responde rápidamente y siempre está dispuesto a ayudarte.

Deja un comentario