JavaScript y el DOM: keyDown vs keyPress

Formularios. Qué sería de nuestro software web sin formularios. La majestuosa forma de permitir a los usuarios de un sistema ingresar información.

En realidad los formularios son un dolor de cabeza. Entre menos campos tengan mejor pero hay situaciones donde el mínimo de campos es muchos campos. Un ejemplo de eso es aplicaciones del sector salud donde hay que tomar muchos datos de un paciente.

Para disminuir el impacto de digitar un formulario tan extenso se busca ayuda de expertos en UX y aún así, por debajo de cuerda, hay muchos campos en un solo formulario.

Solo ingresar números

Un caso común de formularios es que determinados campos solo permitan ingresar valores numéricos y no letras del alfabeto. En primera instancia se pensaría que el campo tipo número que trajo consigo HTML5 bastaría, pero no.

Sigue leyendo
Anuncios

¿Extensión: .jsx o .js?

Desde hace algunos meses atrás he estado escribiendo algo de código JavaScript, más puntualmente, aplicaciones web usando React. Cuando lo hago, uso como editor de código Visual Studio Code. Un muy buen editor para temas web, sobretodo asuntos pertinentes al frontend de una aplicación(CSS, HTML, JS).

Ocurre que normalmente, cuando agrego un nuevo archivo JS al proyecto lo hago usando la extensión .js, sin embargo, al hacerlo de esa forma, el editor no reconoce algunos comandos de Emmet cuando estoy escribiendo etiquetas en código que obedece a sintaxis jsx(el azucar sintáctico que tiene React para escribir el código más parecido a etiquetas HTML).

Es una cuestión bastante tonta pero uno como desarrollador se hace a ciertas costumbres y espera que el editor que usa siga las mismas. Por eso indagué un poco y encontré que en VS Code, cuando quieres que Emmet funcione con JSX, la extensión del archivo debería ser .jsx y no .js como suelo hacer.

Sigue leyendo

Cómo Configurar Registros NS de Mailgun en Namecheap

Mailgun es un servicio que se puede usar para el envío masivo de correos desde software. Sea una app móvil, una app web o trabajos en segundo plano. Cuenta con una muy buena capa gratuita y para empezar a usarlo no es necesario registrarse con tarjeta de crédito(aunque más adelante pueda que sí tengas que).

Servicios similares a Mailgun son Sendgrid y Amazon Simple Email Service(o SES). No hay nada malo en usar alguna de las alternativas. Solo es cuestión de preferencia del momento.

En fin, resulta que para poder enviar correos a cualquier destinatario, normalmente, se debe validar un dominio en alguno de los servicios mencionados. Esta validación tiene como propósito(entre otros cuantos) impedir a spammers que se aprovechen del servicio para sus fechorias.

Sigue leyendo

Heroku y Sentry, Habilitar metadata del Dyno

Heroku es una muy buena plataforma para montar aplicaciones casi que sin despeinarse. Su modo de operar es denominado PaaS, es decir, Plataforma como Servicio(en inglés Platform as a Service). Ser una PaaS quiere decir que al usuario le das lo más que se pueda desmenuzado y listo para usar.

A diferencia de AWS que es una IaaS(Infrastructure as a Service) en Heroku, generalmente, hacer despliegue de aplicaciones solo implica un comando y casi cero configuraciones.

Leer más “Heroku y Sentry, Habilitar metadata del Dyno”

BKT en Producción: AWS y Otros Servicios Usados

En este segundo artículo de la nueva serie que estaré publicando presentaré una serie de servicios y herramientas que se usaron para dejar el software del que esta serie trata funcionando en producción.

Toda la infraestructura se montó en AWS. Fue una combinación de servicios estándar y uno que era relativamente nuevo y en ese entonces aún se actualizaba constantemente.

Los servicios en cuestión son:

  • EC2: Elastic Cloud Computing
  • S3: Simple Storage Service
  • SES: Simple Email Service
  • SNS: Simple Notification Service
  • Code Deploy
  • Lambda
  • AMI: Application Machine Images
  • IAM: Identity and Authorization Management
  • ELB: Elastic Load Balancer
  • RDS: Relational Database Service
  • Cloudfront
  • Auto Scaling

Entre los servicios y herramientas usados por fuera de AWS están:

  • Sentry
  • Papertrail
  • Logentries
  • Slack: para notificaciones de despliegues
  • Jenkins
  • Terraform
  • Packer
  • Skylight
  • New Relic

AWS, siglas para lo que te imagines

Antes de iniciar en este proyecto, la primera vez que vi la consola de AWS me dio pánico. Eran demasiadas opciones y no sabía por donde empezar. Una semana antes de empezar este nuevo software tuve la oportunidad de hacer un curso de AWS(en Platzi, gracias, Yohan Graterol) en el cual pude aprender a usar los servicios básicos de esta plataforma: EC2(con todo lo que tiene) y RDS.

Se podría considerar a EC2 como un mini mounstro dentro de AWS ya que se compone de ELB, Auto Scaling, Elastic IP, Security groups, AMI y todo el tema de instancias en subasta y/o dedicadas.

Leer más “BKT en Producción: AWS y Otros Servicios Usados”

BKT En Producción: Lecciones Aprendidas de un Producto con Todos los Juguetes

Me considero una persona ordenada, no en exceso pero a veces sí lo llevo a puntos que me resultan incómodos a mí mismo. En todo caso, ese orden el cual ejerzo diariamente, me ayuda mucho en diversos aspectos de mi vida personal y/o profesional.

Uno de esos aspectos es coleccionar, de manera ordenada, lecciones/enlaces/textos/conceptos/código que me ayudaron a resolver determinado problema en cierto momento en particular. Y digo que me ayuda porque es una buena costumbre que he tomado desde que inicié a trabajar como desarrollador de software.

En la primera empresa que trabajé al completar una configuración que arrojaba errores nunca, a nadie, se le ocurría guardar el enlace de aquella solución que permitió avanzar. Luego, al pasar el tiempo, volvíamos a hacer una configuración igual o similar, nos encontrábamos el mismo error y nadie sabía donde encontrar la solución ni recordaba cómo resolver el detalle 🙂

Leer más “BKT En Producción: Lecciones Aprendidas de un Producto con Todos los Juguetes”

Cómo listar módulos globales instalados con npm -g

En el mundo del desarrollo web, en lo que a frontend corresponde, npm ha sido el gestor de dependencias de toda la vida hasta que apareció Yarn.

Para usar algunos módulos, en el caso de npm, tocaba instalarlos como dependencia del proyecto y cómo módulo global en el sistema. Al instalarlo global al sistema, se podía ejecutar el comando desde una terminal o consola.

Y sí, es claro que no debería ser necesario una instalación global cuando ya se cuenta con el paquete a nivel del proyecto pero sus razones para eso hay.

Leer más “Cómo listar módulos globales instalados con npm -g”

Backend Handbook para Aplicaciones Ruby on Rails

A lo largo de mis años de trabajo he recopilado conocimientos e información que me ha ayudado a ser un mejor profesional.

Cuando pienso en que qué podría haber sido de mi si esas personas que decidieron escribir un artículo, publicar un libro, responder una pregunta en Stack Overflow, dar una charla o publicar un vídeo no lo hubieran hecho.

Leer más “Backend Handbook para Aplicaciones Ruby on Rails”

Cosas de JavaScript: Seleccionando ID numérico con querySelector

En el artículo anterior a este describo algunos aprendizajes mientras completaba una prueba técnica. Había que implementar una especie de resaltado en textos en una página, mandarlos a una base de datos y poder traerlos de nuevo y mostrarlos donde van.

Pasa que una de las formas de tener precisión sobre dónde volver a mostrar lo que se resaltó era guardando algunos elementos adicionales como el párrafo, un ID que identifique al párrafo y en el caso puntual de la prueba, podía guardar el ID de la página del texto(los textos eran páginas de un “libro” web).
Leer más “Cosas de JavaScript: Seleccionando ID numérico con querySelector”

Cosas de JavaScript: Diferencia entre parentElement y parentNode

Creo que esta es la primera vez que escribo algo sobre JavaScript a nivel del lenguaje. Ya antes había mencionado cosas que había logrado pero no explicaciones al respecto de algo, como sí lo he hecho en Ruby.

JavaScript fue el primer lenguaje de programación web que aprendí(HTML y CSS no son lenguajes de programación). Lo hice a través de un libro gratuito muy popular publicado por Javier Eguiluz: Introducción a JavaScript.

Sin embargo, hay muchas cosas de fondo en JS que desconozco. Tal vez sea la naturaleza multiparadigma del lenguaje o que mi experiencia con el mismo nunca ahondó ya que cuando iba a programar asuntos complejos, pues, generalmente había una librería para ello, ejemplo jQuery para manipulación del DOM. Leer más “Cosas de JavaScript: Diferencia entre parentElement y parentNode”