Web Developer, contador de historias y entusiasta de la fotografía. Bienvenido/as a mi blog. Siga sumercé
viernes, 15 de septiembre de 2023
No pude hacer pan de trigo pero si pan de yuca
miércoles, 16 de agosto de 2023
Tras la huella del Error: Cómo Solucioné un Problema de Render en React
Ayer, miércoles 16 de agosto, desde el equipo de QA me llegó un reporte de un error en uno de los desarrollos que había realizado, un error atípico y difícil de diagnosticar. Estuve en la mañana colocando Logs y debuggers por todos lados, los componentes afectados en los últimos cambios aparentemente no mostraban inconsistencias y renderizaciones fuera de lo normal. Pude replicar el error, pues sucedía al desplazarme por una serie de Tabs y el contenido correspondiente a cada Tab provocaba bloqueos en el sitio web. Usar la extensión React Devtools era imposible, pues al tener un error de bloqueo total de la pagina no era posible navegar, inspeccionar y usar extensiones de Chrome durante el crash.
Al tener un bloqueo de la pagina web es común pensar en una serie de excepciones que van rompiendo todo, también es cierto que en un contexto de desarrollo web puede tratarse de iteraciones indefinidas de un mismo elemento, componente o función, por eso, al llegar a la conclusión de que el problema debía ser un renderizado incontrolado de algún componente de React esta debía ser la sospecha #1.
Primer intento
- Peticiones: Desde el navegador web, abrir el inspeccionador de elementos e ir hasta el Tab "Red" (o "Network" en Inglés) para validar que no existan llamados recurrentes e innecesarios de los queries de Graphql.
- Resultado: Todo a la normalidad.
- Errores en consola: Revisar que no se tengan errores o advertencias en la consola del navegador (Tab "Consola").
- Resultado: Todo a la normalidad.
- Profiling: Intentar hacer Profiling de los componentes de React usando la extension React Devtools.
- Resultado: No se pudo realizar profiling debido al bloqueo de la pagina al momento de activar la opción cuando el bug se había presentado.
- Error Boundary: Agregar como padre uno de los componentes custom llamado ErrorBoundary que sirve par capturar errores en los componentes hijos.
- Resultado: No hubo errores, por lo tanto ErrorBoundary estaba puesto en vano.
Segundo intento
Lo primero que debía hacer era descartar que se trataba de un error en los componentes principales, por eso, el segundo intento para detectar el problema fue abrir el inspeccionador de elementos de Google Chrome y desde la opción de "Fuentes" (o "Sources" en Inglés) activar la casilla "Detenerse cuando se detecten excepciones". Una vez activada la detección de excepciones se procede a navegar en el sitio web para desencadenar todo tipo de excepciones sea cual sea que ocurran durante la navegación, así cuando el Bug se presente lo podremos ver en cuestión (siempre y cuando arroje una excepción).
Un par de horas después, había realizado el proceso de depuración de varios errores, encontrando y solucionando algunos problemas mínimos con la ayuda del step-by-step del inspecionador del navegador web. Este primer intento se consolida al detectar varios errores provocados por la carga Lazy Load de algunos componentes de React, sin embargo, tenia que intentar esta opción a pesar que no sirva para detectar errores de renderizado infinito en React. En conclusión, este segundo intento me sirvió para encontrar puntos de mejora y validaciones extra, pero no para hallar el problema real.
Tercer intento
Después de despejar la mente, almorzar y caminar un rato por la calle, volví a casa, hice masa de pan y la puse en un recipiente para que la levadura se activara y la masa creciera, luego abrí el sitio web de Mercado Libre (o MELI) para buscar algunos productos de intereses, y al cabo de unos minutos no había comprado nada pero si me encontraba inspeccionando el sitio web con la extension de React Devtools, encontré que algunos componentes de MELI se están renderizando de forma innecesaria con solo hacer unas pocas acciones como un hover, también vi que usan servicios Graphql y las traducciones de los productos vienen desde Backend.Conclusiones
- La Persistencia en la Depuración: A pesar de la complejidad y frustración inicial, aprendí la importancia de persistir en la depuración y no rendirte ante problemas difíciles de diagnosticar.
- Enfoque Iterativo: Descubrí que abordar un problema técnico de manera iterativa, probando diferentes enfoques y herramientas, puede llevar finalmente a la identificación y resolución del problema.
- Exploración de Herramientas de Desarrollo: Mi experiencia mostró la utilidad de aprovechar al máximo las herramientas de desarrollo disponibles, como el inspector de elementos y las extensiones como React Devtools, para analizar y entender el comportamiento de tus componentes.
- Descubrimiento Casual: A veces, los descubrimientos más valiosos pueden surgir de manera casual. El hallazgo accidental de la opción "Highlight updates when components render" ilustra cómo explorar diversas características puede revelar soluciones inesperadas.
- Control de Referencias y Ciclos de Vida: Aprendí sobre la importancia de controlar las referencias y las actualizaciones en los componentes de React, especialmente al trabajar con efectos en el ciclo de vida de los componentes.
viernes, 4 de agosto de 2023
Un viaje como Frontend Developer
Hoy quiero compartir con ustedes un poco más acerca de quién soy y cómo me he convertido en un Frontend Developer. Mi nombre es Julian, y mi pasión por la tecnología y la programación ha sido el motor que me ha impulsado en este fascinante camino.
A mediados del 2010 y 2011, desde una edad temprana, siempre me sentí atraído por el mundo de la informática. Recuerdo con cariño mis primeros días jugando con las computadoras de la escuela, tratando de entender cómo funcionaban y cómo podía interactuar con ellas. Mi curiosidad me llevó a profundizar en los conceptos básicos de programación, y pronto me encontré desarrollando mis primeros proyectos simples, pero emocionantes. Emocionantes porque mis primeros códigos fueron escritos en Bash y comúnmente escribía sentencias peligrosas para eliminar el System32, abrir cientos de ventanas de Paint hasta bloquear la computadora, y otros Scripts delicados. En varios casos estos archivos Bash venían con un icono personalizado de una carpeta con el nombre de "P0xN0", las personas que miraban esta "carpeta" con aquel supuesto contenido videográfico terminaban dando doble click y por ende dando muerte a la computadora, adiós System32.
A medida que crecía, mi fascinación por la tecnología solo aumentaba, y mi objetivo se volvía más claro: quería convertirme en un profesional de la programación y ayudar a crear aplicaciones y sitios web innovadores que impactaran la vida de las personas de manera positiva.
Mi camino hacia convertirme en Frontend Developer no fue fácil, pero cada desafío que enfrenté fue una oportunidad para aprender y mejorar mis habilidades. Estudié arduamente y me sumergí en una amplia gama de tecnologías, desde los fundamentos como HTML, CSS y JavaScript, hasta frameworks y librerías más avanzadas como React y Angular. Amo profundamente programar en TypeScript, así que todo lo que escribo suele venir bien tipado, odio usar los "any" excepto donde no hay escapatoria para no usarlo.
A lo largo de mi carrera, he enfrentado desafíos en el diseño y desarrollo de interfaces de usuario altamente interactivas, garantizando que la experiencia del usuario sea fluida y atractiva. También he tenido la oportunidad de colaborar con diseñadores, analistas y otros desarrolladores para comprender las necesidades del usuario y traducirlas en productos finales que superen sus expectativas.
La tecnología nunca deja de avanzar, y eso es lo que más me emociona de ser un Frontend Developer. Cada día hay algo nuevo que aprender, ya sea una nueva técnica de diseño, un framework emergente o una metodología de desarrollo. Mantenerme actualizado en este entorno en constante evolución es un desafío que abrazo con entusiasmo. Suelo usar Twitter, YouTube y charlas con amigos para mantenerme al día.
A través de mi trayectoria como Frontend Developer, he aprendido la importancia de la empatía y la comprensión del usuario. Al final del día, nuestro trabajo no solo se trata de escribir código, sino de resolver problemas y mejorar la vida de quienes interactúan con nuestras creaciones, por eso, todo lo que hago suele venir acompañado de buena accesibilidad Web, vivo enamorado de A11y.
Me siento bendecido de poder dedicar mi vida profesional a lo que amo, y estoy emocionado de seguir creciendo y evolucionando en este campo tan apasionante. En este blog, compartiré mis conocimientos, experiencias y consejos relacionados con el desarrollo frontend, con la esperanza de inspirar y ayudar a otros desarrolladores en su propio viaje.
Así que únanse a mí en este viaje, donde exploraremos juntos el fascinante mundo del desarrollo frontend y cómo podemos dar vida a nuestras ideas a través del código.
¡Gracias por leer! Si tienes alguna pregunta o tema que te gustaría que aborde en futuras publicaciones, no dudes en dejar un comentario. ¡Hagamos crecer esta comunidad de desarrolladores apasionados por la tecnología!
¡Nos vemos en la próxima entrada del blog!
viernes, 6 de enero de 2023
La noche es joven
martes, 6 de diciembre de 2022
Como criar un gato para que no sea loco y callejero
También es importante acostumbrar al gato a estar en casa y a interactuar con las personas de una manera positiva desde una edad temprana. Esto puede ayudar a que el gato se sienta cómodo y seguro en el hogar y tenga menos probabilidades de convertirse en un gato callejero.
Otras cosas que pueden ayudar a prevenir que un gato se vuelva loco y callejero incluyen:
- Proporcionar al gato una variedad de juguetes y actividades para mantenerlo entretenido y estimulado.
- Ofrecerle un espacio seguro y cómodo donde pueda dormir y descansar.
- Evitar castigar al gato o tratarlo de manera cruel. Esto puede causar estrés y trauma en el gato y puede contribuir a que se vuelva agresivo o temeroso.
- Asegurarse de que el gato esté desparasitado y vacunado regularmente. Esto ayudará a prevenir enfermedades y problemas de salud que pueden contribuir a comportamientos inapropiados en el gato.
- Criar un gato para que sea un miembro feliz y saludable de la familia puede requerir tiempo y esfuerzo, pero puede ser muy gratificante. Con paciencia y amor, su gato puede crecer para ser un compañero leal y afectuoso.
viernes, 14 de enero de 2022
Amplitude Experiment + React
In this post, you'll learn:
- Use amplitude experiments with React.
- Create AB tests on any react component.
Requirements
- Access to Amplitude Experiments
- A React project.
But... What is Amplitude Experiments?
Amplitude Experiment embeds analytics and customer behavior into A/B testing and rollout workflows, so teams learn faster and adapt experiences for key segments.
martes, 31 de agosto de 2021
Pasión por la vida
Hace poco escuché un Podcast, lo cierto es que empecé a escucharlo por solo curiosidad y además riéndome un poco de su título jaja, se llama "Importaculismo Práctico", en mi día a día ya practicaba muchos de los conceptos que aparecen ahí, pero aprendí varias cosas más que me han servido. Dejaré el link por aquí: https://open.spotify.com/album/7jp26DMrnZncVCOtpQpDQp?si=8Lzf8bHtRxGd8k34D1kGEA&dl_branch=1
Saludos,
Julian.
lunes, 12 de octubre de 2020
Guide: Text2locale
Install
$ npm install -g github:juliandavidmr/text2locale
Usage
$ text2locale input "./example/src" -o "./example/locale/" -l en -t es,de,zh
More command info: $ text2locale input --helpAPI
input command options| Option | Description | Default |
|---|---|---|
-l, --lang | Language of the texts to be extracted. | en |
-o, --output | Output directory. | ./ |
-s, --separator | Separator to generate the key names. | _ |
-t, --templates | Generate template for other languages. | en,es |
Whats Next?
The generated files can be manipulated by the i18n-editor website, you can add/remove/edit all translation resources from multiple JSON files at the time.Referencias:
- GitHub: i18n Editor Simple JSON localization file manager.
- GitHub: text2locale. Extract all the texts of any project with HTML files and generate a KV (Key-Value) file.
domingo, 24 de noviembre de 2019
C + WASM + Linux
Los pasos a continuación fueron probados en Ubuntu, también son aplicables a otros sistemas operativos basados en este. Los pasos que hacen uso de la terminal fueron ejecutados desde una misma sesión (de terminal).
Pasos
Paso 1: Instalación de emscripten:
# Ubicarse en una carpeta donde desee proceder con la instalación
cd Documents
# Descargar codigo fuente de Emscripten (emsdk repo)
git clone https://github.com/emscripten-core/emsdk.git
# Entrar al directorio
cd emsdk
# Descargar e instalar lo más reciente del SDK tools.
./emsdk install latest
# Construir el "latest" SDK y "active" para el usuario actual. (escribe el archivo ~/.emscripten)
./emsdk activate latest
# Activar el PATH y otras variables de entorno en la terminal actual
source ./emsdk_env.shPaso 2: Escribir código C
A continuación, creamos la función myFunction que mostrará un mensaje y retornará el argumento numérico argc multiplicado por 2./// main.c
#include <stdio.h>
#include <stdlib.h>
#include <emscripten/emscripten.h>
int main(int argc, char ** argv) {
printf("WebAssembly module loadedn");
return 0;
}
#ifdef __cplusplus
extern "C" {
#endif
int EMSCRIPTEN_KEEPALIVE myFunction(int argc, char ** argv) {
printf("MyFunction Called");
return argc * 2;
}
#ifdef __cplusplus
}
#endifNotas:
- La librería emscripten/emscripten.h estará disponible una vez se ha completado el paso 1.
- La etiqueta EMSCRIPTEN_KEEPALIVE hace que la función myFunction esté disponible en JavaScript después de la compilación.
Paso 3: Compilar C en WASM
emcc main.c -O3 -o index.js -s "EXTRA_EXPORTED_RUNTIME_METHODS=['ccall', 'cwrap']"Notas:- El comando toma main.c como archivo de entrada y genera el archivo index.js.
- El archivo index.js expone la función ccall que será usada posteriormente para ejecutar myFunction.
- El comando genera otro archivo llamado index.wasm el cual contiene todo el código compilado.
Paso 4: Cargar código compilado en el navegador.
PASO 4.1: CREAR ARCHIVO MAIN.HTML
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>WebAssembly Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<button id="myFunc">Call myFunction</button>
<!-- Include the JavaScript glue code. -->
<!-- This will load the WebAssembly module and run its main. -->
<script async src="index.js"></script>
<script>
document.getElementById('myFunc').addEventListener('click', function(ev) {
var result = Module.ccall(
'myFunction', // name of C function
'number', // return type
['number'], // argument types
[42]); // arguments
console.log('Result:', result);
});
</script>
</body>
</html>Notas: Cada vez que el botón “Call myFunction” sea presionado, se ejecuta la función myFunction con el argumento 42 de tipo number.PASO 4.2: MONTAR SERVIDOR LOCAL
Este paso es opcional si ya dispones de alguna herramienta para montar un servidor local.1. Instalar el paquete global local-web-server de npm.
npm i local-web-server -gmodule.exports = {
mime: {
'application/wasm': ['wasm']
}
};ws
# Muestra algo como: Listening on http://david:8000, http://127.0.0.1:8000lunes, 21 de octubre de 2019
Creación e historia de i18n-editor
La administración centralizada de recursos de traducción muchas veces resulta ser una tarea muy compleja. Una actividad tan sencilla como corregir una palabra en un idioma determinado y tener que actualizar el texto en todos los demás idiomas puede demandar bastante tiempo, terminando así en la ejecución de una tarea que no debería tomar mucho tiempo.
Dado lo anterior, empecé usando herramientas (públicas y de pago), estas no se adaptaban completamente a mis necesidades, excepto babeledit. Usé babeledit en el periodo de prueba gratis, despues de terminar el Trial pensé: "Yo puedo crear e implementar un sistema que posea las funciones básicas de babeledit". La chispa se encendió e inicié de una vez por todas creando un sitio web con Angular. En cuestión de unas pocas horas ya disponía de una base funcional para edición de recursos, sin embargo la interface visual de ese momento era con 0% de CSS, parecía un sitio de los años 2000 😅.
Despues de algunos días de uso excesivo de i18n-editor durante mi trabajo, hice varios ajustes y mejoras, y lo mas importante es que mi productividad mejoró considerablemente; ya no tenía que dividir mi pantalla en segmentos de 10 pestañas de VSCode en paralelo para poder visualizar/editar cada archivo JSON (inclusive un monitor ultra-wide quedaba pequeña), ahora i18n-editor me permitía abrir una sola ventana para realizar la misma operación (y solo ocupaba la mitad o menos del espacio del monitor) 😻.
Al ver que esta herramienta resultaba muy útil, decidí difundir dentro de mi circulo de compañeros esta herramienta. Recibí varios comentarios constructivos e inclusive más adelante llegaría el primer contribuidor que le daría soporte a la carga de archivos de Excel.
Finalmente, escribo este primer post para dar a conocer el inicio de esta historia e invitar a todos aquellos que deseen contribuir y usar libremente i18n-editor.
domingo, 24 de junio de 2018
Sueño: El gato y el revolver
En medio de la agitada situación, logré entrar por la parte de atrás de una casa, el cual resultó ser la misma casa que el hombre armado acababa de entrar. Detrás de una gruesa columna visualizaba la peligrosa historia que se desenvolvia dentro de la casa de estilo antiguo y con un área descubierta al techo en la parte central, muchas plantas y gruesas columnas de madera alrededor eran el sitio de aquel inicio de una posible tragedia.
Muchos gritos abundaban en el lugar, el señor armado apuntaba a tan sólo pocos metros a un niño, varias personas protegían al pequeño hombre. Me encontraba a unos cuantos pasos del niño desde atrás, cuando de repente se aparece un gato a mi derecha de color amarillo con blanco bajando de un árbol delgado pero más alto que el techo de la casa, de manera consecutiva a la bajada del gato, noté la presencia de un extraño animal escondida bajo la sombra de una matera, la criatura desconocida parecía ser anfibio pero eran suposiciones ya que sólo miraba bajo la oscuridad su cuerpo. De un zarpazo la criatura atrapó del cuello al pequeño gato que acababa de tocar el suelo. Bajo la luz se observaba aquel animal que moría aficciado por la mandíbula de la rara criatura que jamás había visto ni en Discovery Channel.
¿Podrá la primera AGI aburrirse?
Sí, la primera AGI (inteligencia artificial general) puede aburrirse. En 2026, la AGI no existe públicamente, y dudo que realmente exista ha...
-
UPDATE 2026: Fix for new linux kernel versions (6.17+) in this branch: https://codeberg.org/anlijudavid/driver_wifi_ztopinc/src/branch/linux...
-
Hoy 26 de noviembre de 2024 tuve un sueño muy extraño pero interesante. El sueño arrancó en primera persona, no es tan común este tipo de su...
.png)


