Js

En este post te mostraré algo muy simple pero que no todos sabemos al principio: cómo conectar un lector de código de barras a nuestra aplicación de JavaScript. Con esto me refiero a un lector de código de barras físico, conectado a la computadora ya sea por USB o PS/2. Vamos a leer el código de barras y saber cuando el código se ha terminado de leer. Todo esto en la web con JavaScript y un input. Nota: recuerda que en mi blog ya te enseñé a leer códigos de barras en JavaScript con la cámara del dispositivo, pero no con un lector físico de esos que tienen “luces rojas”. ...

Hoy te mostraré cómo deshabilitar el linter de ESLint que normalmente se usa al programar aplicaciones web con JavaScript. Este linter nos ayuda a tener un código más limpio y ordenado, pero en ocasiones es necesario deshabilitar ESLint temporalmente o en determinadas líneas. En mi caso quería invocar al depurador (con debugger) y me aparecía el mensaje de: Unexpected ‘debugger’ statement no-debugger. Obviamente a ti te pueden aparecer otros errores relacionados a este linter llamado ESLint, por eso es que en este post te mostraré cómo deshabilitarlo ya sea por una línea o por un bloque, sin importar el error. ...

Hoy vamos a ver cómo cortar un array o extraer elementos de un arreglo usando programación en JavaScript, de modo que podamos obtener cierta cantidad de elementos de un array. Esto puede ser útil cuando queremos tomar los primeros N elementos del arreglo, o dividir el arreglo en porciones. ...

Hoy te mostraré cómo usar la función debounce con el framework Vue y obviamente el lenguaje de programación JavaScript. Implementar esta función es un poco confuso debido a la definición de métodos dentro de los componentes de Vue y por la confusión que genera la función, ya que la misma genera otra función y solo debe ser definida una vez al inicio. Pero bueno, vamos por partes. Verás que a partir de esto podrás usar debounce en tus componentes de Vue. ...

En este post de programación con JavaScript y Vue te enseñaré a importar una librería de NPM a un componente de Vue. Si bien esto es algo muy simple, en ocasiones podemos olvidarnos o perdernos. Por ello es que en el post de hoy te enseñaré a importar un paquete de NPM desde un componente de Vue y usarlo dentro de ese componente a través de require. Estoy suponiendo que usas la Vue CLI con Webpack, pero incluso si no lo haces, esto podría darte una ayuda. ...

En este post de programación con el framework Vue o Vue.js te mostraré cómo acceder a data cuando regresamos los datos o el objeto data de nuestro componente. Esto es necesario porque en ocasiones necesitamos acceder a los datos de Vue desde la definición. Al final esto no tiene tanto que ver con Vue.js, sino con JavaScript. Pero incluso así en ocasiones podemos olvidar lo que sucede con los objetos anónimos. ...

En este post sobre programación web HTML y JavaScript te mostraré cómo hacer que el usuario pueda dibujar en un canvas usando el mouse, algo así como un paint muy básico. De esta forma vamos a permitir que el usuario pueda dibujar y pintar sobre el canvas usando el ratón. Más adelante podrías adaptar este código para cualquier otra cosa, incluso para crear un paint completo. Aquí solo te mostraré cómo permitir que el usuario dibuje en la web con un color y grosor determinado. ...

En el post de hoy te mostraré cómo prevenir que el usuario navegue a otra página o pestaña, recargue la página o la cierre. Todo esto con JavaScript. Desde ahora te digo que (si bien contradice el título del post) no es posible prevenirlo al 100 %, solo se puede mostrar una advertencia que el usuario puede ignorar. Si bien no vamos a prevenir, te mostraré cómo mostrar un mensaje para darle al usuario la posibilidad de no cerrar la pestaña o navegar a otro lugar. Esto funciona con Chrome y Firefox en sus últimas versiones al momento de escribir este post. ...

En este post te mostraré cómo crear un archivo de texto en el navegador con JavaScript, escribir contenido dentro del mismo y luego forzar su descarga. Básicamente vamos a guardar un Blob con JS. De este modo vas a poder generar un txt con JS y descargarlo. Además, con lo que te mostraré podrás generar un CSV o cualquier tipo de archivo siempre y cuando sepas estructurarlo. Todo lo que aprenderás será aplicado del lado del cliente, así que no harás llamadas al servidor. Por cierto, usaremos Blob y URL.createObjectURL. ...

En el artículo de hoy te mostraré cómo mostrar la ubicación del usuario en un mapa en tiempo real e ir actualizando el marcador del mapa conforme el usuario se mueva. Esto puede servir para varias cosas. La más simple es mostrarle al usuario su ubicación en el mapa, pero puede enfocarse a algo tan complejo como hacer algo como Uber (enviando la ubicación a un servidor y todo eso). Por cierto, vamos a usar JavaScript y OpenLayers (alternativa a Google Maps): tecnologías gratuitas y open source que no nos obligan a aceptar licencias ni pagar. Obviamente esto se puede usar en dispositivos móviles Android o iOS mientras tengan un navegador web decente. Y más tarde podemos convertir la app web en una PWA para que sea algo así como una app nativa (como hice con la app de transportes). Pero bueno, vamos a lo interesante: cómo obtener la ubicación del usuario y mostrarla en el mapa mientras se mueve. Puedes acceder a la demostración justo ahora desde este enlace. Te debería mostrar tu ubicación actual con el símbolo de un auto. ...