Seis tareas para un desarrollador Front-End

1. Formulario de tarjeta de crédito

Una forma genial de tarjeta de crédito con microinteracciones fluidas y agradables. Incluye formato de números, verificación y detección automática del tipo de tarjeta. Está construido sobre Vue.js y también es totalmente responsivo. (Puedes ver aquí.)

formulario de tarjeta de crédito

Lo que aprenderás:

• Procesar y validar formularios
• Manejar eventos (por ejemplo, cuando los campos cambian)
• Comprender cómo mostrar y colocar elementos en la página, especialmente la información de la tarjeta de crédito que aparece en la parte superior del formulario.

El artículo fue traducido con el apoyo de EDISON Software, que cuida la salud de los programadores y su desayunoy desarrolla software personalizado.

2. Histograma

Un histograma es un cuadro o gráfico que representa datos categóricos con barras rectangulares con alturas o longitudes proporcionales a los valores que representan.

Se pueden aplicar vertical u horizontalmente. Un gráfico de barras verticales a veces se denomina gráfico de líneas.

Lo que aprenderás:

• Mostrar datos de forma estructurada y comprensible.
• Además: aprenda a utilizar el elemento. canvas y cómo dibujar elementos con él

es Puedes encontrar datos de población mundial. Están ordenados por año.

3. Animación del corazón de Twitter

En 2016, Twitter introdujo esta increíble animación para sus tweets. A partir de 2019, todavía se ve bien, así que ¿por qué no crear uno usted mismo?

Lo que aprenderás:

• Trabajar con atributo CSS keyframes
• Manipular y animar elementos HTML.
• Combina JavaScript, HTML y CSS

4. Repositorios de GitHub con función de búsqueda

No hay nada sofisticado aquí: los repositorios de GitHub son solo una lista glorificada.
El objetivo es mostrar los repositorios y permitir al usuario filtrarlos. Usar API oficial de GitHub para obtener repositorios para cada usuario.

Página de perfil de GitHub - github.com/indreklasn

Lo que aprenderás:

• Recibir datos de API
• Mostrar datos de API
• Filtrar y mostrar datos relevantes para cada búsqueda.
• Opcional: si estás preparado para un desafío, usa API v4, creado con GraphQL. Si quieres aprender GraphQL, ve a uno de mis artículos anteriores..

5. Chats al estilo Reddit

Los chats son una forma popular de comunicación debido a su simplicidad y facilidad de uso. Pero, ¿qué es lo que realmente impulsa las salas de chat modernas? WebSockets!

Lo que aprenderás:

• Utilice WebSockets, comunicación en tiempo real y actualizaciones de datos
• Trabajar con niveles de acceso de usuarios (por ejemplo, el propietario de un canal de chat tiene el rol admin, y otros en la sala - user)
• Procese y valide formularios: recuerde, la ventana de chat para enviar un mensaje es input
• Crea y únete a diferentes chats
• Trabajar con mensajes personales. Los usuarios pueden chatear con otros usuarios de forma privada. Básicamente, establecerá una conexión WebSocket entre dos usuarios.

6. Navegación estilo franja

Lo que hace que esta navegación sea única es que el contenedor emergente se transforma para adaptarse al contenido. Hay una elegancia en esta transición en comparación con el comportamiento tradicional de abrir y cerrar un nuevo popover.

Lo que aprenderás:

• Combina animaciones CSS con transiciones
• Atenuar el contenido y aplicar la clase activa al elemento flotante

Intente hacerlo usted mismo primero, pero si necesita ayuda, consulte esto guía paso por paso.

Fuente: habr.com