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

¿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 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”

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”