Tal vez hayas visto en varias páginas web el efecto de máquina de escribir. Se ha convertido muy popular y en realidad es muy divertido ver como la página web nos muestra información variada utilizando dicho efecto. Quizás te hayas preguntado cómo se hace. Aunque existen muchas maneras de alcanzar este efecto, en este tutorial te mostraré cómo hacerlo utilizando un plugin de JavaScript llamado iTyped. Es genial y muy fácil de utilizar. Primero vamos a crear 3 documentos dentro de un directorio que puedes nombrar como gustes.<ol><li>index.html</li><li>estilos.css</li><li>script.js</li></ol> Dentro del HTML crea un marcado con el contenido que desees. Acuérdate de conectar los documentos de la hoja de estilos y JavaScript como generalmente harías, solo asegúrate de añadir type="module" en la etiqueta &lt;script&gt;. <pre class="ql-syntax" spellcheck="false">&lt;script src="script.js" type="module&gt;&lt;/script&gt;
</pre> Esto porque vamos a estar utilizando el CDN de iTyped. Para aprender más sobre iTyped puedes visitar <a href="https://www.npmjs.com/package/ityped" rel="noopener noreferrer" target="_blank">este enlace</a>. Existen 2 maneras de utilizar iTyped, estas son instalando el paquete con NPM o utilizando el CDN. En este tutorial vamos a utilizar el CDN ya que no estaremos creando nada complicado que requiera de un empaquetador de módulos ni nada por el estilo. Para poder obtener el efecto de máquina de escribir, también debemos de añadir un bloque de CSS a la hoja de estilos proveído por la gente de iTyped. <pre class="ql-syntax" spellcheck="false">.ityped-cursor&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;font-size:&nbsp;2.2rem;
&nbsp;&nbsp;&nbsp;&nbsp;opacity:&nbsp;1;
&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation:&nbsp;blink&nbsp;0.3s&nbsp;infinite;
&nbsp;&nbsp;&nbsp;&nbsp;-moz-animation:&nbsp;blink&nbsp;0.3s&nbsp;infinite;
&nbsp;&nbsp;&nbsp;&nbsp;animation:&nbsp;blink&nbsp;0.3s&nbsp;infinite;
&nbsp;&nbsp;&nbsp;&nbsp;animation-direction:&nbsp;alternate;
}
&nbsp;
@keyframes&nbsp;blink&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;100%&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity:&nbsp;0;
&nbsp;&nbsp;&nbsp;&nbsp;}
}
&nbsp;
@-webkit-keyframes&nbsp;blink&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;100%&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity:&nbsp;0;
&nbsp;&nbsp;&nbsp;&nbsp;}
}
&nbsp;
@-moz-keyframes&nbsp;blink&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;100%&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity:&nbsp;0;
&nbsp;&nbsp;&nbsp;&nbsp;}
}
</pre> Además, asegúrate de tener en tu marcado la etiqueta que va utilizar iTyped añadiéndole un id que vas a utilizar al momento de configurar iTyped en el documento de JavaScript. Ahora ya tenemos el marcado listo y la hoja de estilos y JavaScript conectados, solo nos falta configurar iTyped con JavaScript y es muy sencillo. Simplemente importemos el script que inicializa iTyped. <pre class="ql-syntax" spellcheck="false">&nbsp;&nbsp;import&nbsp;{&nbsp;init&nbsp;}&nbsp;from&nbsp;'ityped'
</pre> Ahora elijamos el elemento de HTML con el id que le asignamos (puede ser el nombre que quieras). <pre class="ql-syntax" spellcheck="false">&nbsp;&nbsp;const&nbsp;elementoConId&nbsp;=&nbsp;document.querySelector('#iTypedId')
</pre> Ahora solo nos queda usar la funcion init que importamos de iTyped. <pre class="ql-syntax" spellcheck="false">&nbsp;&nbsp;init(elementoConId,&nbsp;{&nbsp;showCursor:&nbsp;false,&nbsp;strings:&nbsp;['HTML', 'CSS',&nbsp;'JavaScript'&nbsp;]&nbsp;});
</pre> Si lo hiciste de la manera correcta el elemento de HTML debe estar mostrando el efecto de máquina de escribir utilizando las palabras HTML, CSS y JavaScript. Para aprender cómo hacerlo en React o añadir otras opciones puedes ver la documentación. Tambien puedes ver el video adjunto de la página de YouTube JavaScript Ecosistema. Hasta la próxima.

Reynaldo Navedo

En esta publicación estaremos aprendiendo a utilizar el plugin basado en vanilla JavaScript para obtener el efecto de máquina de escribir en un sitio web.

Efecto de máquina de escribir usando iTyped

NodeJS es un entorno de ejecución para JavaScript que se ejecuta en el lado del servidor. Fue creado en 2009 y desde entonces ha ganado una gran popularidad en el mundo del desarrollo web.&nbsp;Una de las principales ventajas de NodeJS es que permite a los desarrolladores utilizar JavaScript en el lado del servidor. Esto significa que pueden utilizar el mismo lenguaje en todo el stack de tecnologías de una aplicación, lo que hace que el desarrollo sea más rápido y fácil de mantener.&nbsp;Otra ventaja de NodeJS es su rendimiento. Utiliza un modelo de ejecución basado en eventos y una sola hebra, lo que significa que puede manejar un gran número de solicitudes concurrentes de manera eficiente. Esto lo convierte en una excelente opción para aplicaciones de alto rendimiento y alta concurrencia.&nbsp;Además, NodeJS tiene una gran cantidad de módulos y paquetes disponibles en su repositorio de paquetes, npm, que pueden ser utilizados para añadir funcionalidades adicionales a las aplicaciones. Esto hace que sea muy fácil agregar funcionalidades a las aplicaciones y acelera el proceso de desarrollo.&nbsp;En resumen, NodeJS es un entorno de ejecución de JavaScript muy popular que permite a los desarrolladores utilizar el mismo lenguaje en el lado del servidor y del cliente. Además, ofrece un rendimiento excelente y una gran cantidad de módulos y paquetes disponibles para añadir funcionalidades adicionales a las aplicaciones.

Definir a NodeJS no debe ser complicado, en esta lectura presento un resumen.

NodeJS en resumen

JavaScript es un lenguaje de programación que ha ganado gran importancia en el desarrollo web. Es utilizado en casi todos los sitios web y es una parte esencial de la experiencia de usuario en la web moderna. Uno de los principales beneficios de JavaScript es que permite a los desarrolladores crear interactividad en los sitios web. Por ejemplo, se puede utilizar para crear formularios que validen la entrada del usuario, o para mostrar contenido dinámico sin tener que recargar la página. Además, JavaScript también es utilizado para crear animaciones y efectos visuales atractivos. Esto permite que los sitios web sean más atractivos y fáciles de usar para los visitantes. Otra ventaja de JavaScript es que se ejecuta en el lado del cliente, lo que significa que no requiere que el servidor realice cálculos costosos. Esto hace que las páginas web se carguen más rápidamente y mejora la experiencia del usuario. Una de las mayores críticas es que el lenguaje es de tipado abierto, sin embargo, este asunto se ha resuelto con TypeScript, una librería creada para añadir tipos de datos. Se rumora que se incluirá por defecto a JavaScript en actualizaciones futuras. Esperemos. No puedo dejar afuera que librerías como NodeJS han hecho de JavaScript un lenguaje muy dinámico que permite crear API's y código de servidor utilizando un solo lenguaje. Por si fuera poco, JavaScript también es utilizado para crear aplicaciones de escritorio y móviles con librerías como React Native y Ionic, entre otras. En resumen, JavaScript es un lenguaje de programación esencial para el desarrollo web moderno. Es utilizado para crear interactividad y efectos visuales atractivos en los sitios web, y su ejecución en el lado del cliente mejora la velocidad y la experiencia del usuario, así como su versatilidad para crear APIs y aplicaciones móviles. El futuro de la web necesita a JavaScript y su evolución cada vez será mejor para los desarrolladores.

El lenguaje de programación que lo hace casi todo.

JavaScript en resumen

En este tutorial estaremos usando tailwindcss y javascript para crear un sistema de pestañas (tabs)

Categoría javascript