En este post voy a poner las instrucciones para comenzar un proyecto con Buefy. Buefy es la combinación de Vue y Bulma CSS, ofrece componentes de Bulma CSS pero mejorados con el buen Vue. Vamos a utilizar NPM con la CLI de Vue (vue-cli), ya que será un proyecto un tanto formal. ...
Una vez que ya hemos creado un proyecto con la CLI de Vue (usando Buefy, por ejemplo) podemos agregarle otros paquetes como un enrutador. Vue Router es el enrutador oficial para Vue.Js y permite crear Aplicaciones de una sola página o Single Page Applications. De esta manera tenemos una navegación más fluida sin recargar la página, ahorrando ancho de banda y agregando velocidad. En este post vamos a ver cómo instalar y configurar el enrutador de Vue usando NPM, además de configurar las rutas para que coincidan con nuestros componentes. ...
En este post voy a explicar cómo grabar audio del micrófono con JavaScript, MediaRecorder y la API de getUserMedia. Al final seremos capaces de: Pedir permiso de acceder al micrófono Obtener una lista de micrófonos Seleccionar el micrófono para grabar Comenzar una grabación Detener la grabación de audio Descargar el audio grabado Todo eso sin usar plugins, extensiones ni esas cosas: se utiliza JavaScript puro. ...
Cuando un usuario selecciona un archivo de tipo imagen con un input de tipo file en HTML podemos generar una previsualización de la imagen dentro de una etiqueta img, a fin de que el usuario conozca la imagen que seleccionó antes de que procese la imagen. En este post vamos a ver cómo mostrar la imagen seleccionada, escuchando el evento change del input y estableciendo ese file como src de una imagen. ...
JSON y Go En este post voy a explicar cómo codificar y decodificar el formato JSON (JavaScript Object Notation) usando el lenguaje de programación Go, también conocido como Golang. Para hacerlo no necesitamos librerías externas ni paquetes extraños; solamente a encoding/json con las funciones Marshal y Unmarshal que nos permitirán trabajar con structs, arreglos, cadenas y todos los tipos de datos. Nota: esto ya lo hicimos con PHP, Java y JavaScript. ...
Resolviendo otro ejercicio de CodeWars me encontré uno en donde nos pide que hagamos una función que indique el elevador (izquierda o derecha) más cercano a un piso de un edificio. Dice más o menos así: Existen 2 elevadores en un edificio, uno que está a la izquierda y otro a la derecha en un edificio que tiene 3 pisos (numerados del 0 al 2). Escribe una función que reciba el número de piso del elevador de la izquierda, el de la derecha y el piso en el que es llamado. Dicha función debe regresar el nombre del elevador que esté más cercano al piso en el que se llama. Si ambos están a la misma distancia entonces que regrese el de la derecha. En resumen debería regresar “izquierda” o “derecha” dependiendo del elevador que esté más cercano al piso en donde se llama. Si la distancia es la misma, que regrese “derecha”. ...
En este post vamos a ver cómo usar la API de speechSynthesis con JavaScript, presente en la mayoría de los navegadores web. Esto permitirá hacer un conversor de texto a voz con JS, sin librerías externas ni frameworks. La tecnología TTS, Text to speech, texto a voz o síntesis de voz es algo que permite convertir texto a habla, es decir, ingresamos el texto y luego escuchamos una voz que lo “lee”. Gracias a esta API de speechSynthesis con JavaScript podemos agregar más funcionalidades a nuestras aplicaciones web, y hay buenas noticias, pues funciona (al momento de escribir esto) en Chrome, Firefox y Edge. También en Android usando Chrome y Firefox. Veamos entonces cómo consumir esta API. ...
En mi blog he hecho varios posts sobre tomar fotos con la cámara web desde JavaScript, para enviarlas a PHP; pero nunca he hecho un ejemplo sin usar PHP. Es por ello que hoy voy a explicar cómo tomar una foto de la cámara web (igualmente de la cámara trasera o delantera en los dispositivos compatibles) y guardarla o descargarla directamente como archivo, sin usar código del servidor. El código para tomar la foto funciona en varios dispositivos con un navegador actualizado, desde teléfonos y tabletas Android, iPads y más. ...
He creado un generador de multiplicaciones aleatorias, en donde se presiona un botón y se generan multiplicaciones para imprimirlas y resolverlas, funciona totalmente en línea y se pueden personalizar los números. ...
En este post voy a resolver un ejercicio que dice así: Crear una función que reciba una cadena y regrese la primera letra o carácter que no se repita en toda la cadena. No importa si la letra está en mayúscula o minúscula, se cuenta como repetida de igual manera. Eso sí, al regresar la letra se debe regresar en su forma original (es decir, si era mayúscula se regresa mayúscula, si no, minúscula). Por si no se encuentra una letra que no se repita, se debe regresar una cadena vacía. Dicho de otra manera, se necesita buscar la primera letra que aparezca exactamente una vez en la cadena. Lo he tomado de codewars. Veamos entonces cómo resolverlo. Vamos a convertir a minúscula y a ver si una letra aparece únicamente una vez. ...