Seis tarefas para un programador front-end

1. Formulario de tarxeta de crédito

Unha forma de tarxeta de crédito xenial con microinteraccións suaves e agradables. Inclúe o formato do número, a verificación e a detección automática do tipo de tarxeta. Está construído en Vue.js e tamén é totalmente sensible. (Podes ver aquí.)

formulario de tarxeta de crédito

O que vai aprender:

• Procesar e validar formularios
• Xestionar eventos (por exemplo, cando os campos cambian)
• Entender como mostrar e colocar elementos na páxina, especialmente a información da tarxeta de crédito que aparece na parte superior do formulario

O artigo foi traducido co apoio de EDISON Software, que coida da saúde dos programadores e do seu almorzoE desenvolve software personalizado.

2. Histograma

Un histograma é un gráfico ou gráfico que representa datos categóricos con barras rectangulares con alturas ou lonxitudes proporcionais aos valores que representan.

Pódense aplicar vertical ou horizontalmente. Un gráfico de barras verticais ás veces chámase gráfico de liñas.

O que vai aprender:

• Mostrar os datos dun xeito estruturado e comprensible
• Ademais: aprende a usar o elemento canvas e como debuxar elementos con el

Aquí podes atopar datos de poboación mundial. Están ordenados por anos.

3. Animación de corazón de Twitter

Xa en 2016, Twitter presentou esta incrible animación para os seus chíos. A partir de 2019, aínda se ve como parte, entón por que non crea un ti mesmo?

O que vai aprender:

• Traballar co atributo CSS keyframes
• Manipular e animar elementos HTML
• Combina JavaScript, HTML e CSS

4. Repositorios de GitHub con función de busca

Non hai nada elegante aquí: os repositorios de GitHub son só unha lista glorificada.
O obxectivo é mostrar os repositorios e permitir que o usuario os filtre. Use API oficial de GitHub para conseguir repositorios para cada usuario.

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

O que vai aprender:

• Recibe datos da API
• Mostrar datos da API
• Filtra e mostra os datos relevantes para cada busca
• Opcional: se estás preparado para un desafío, úsao API v4, construído usando GraphQL. Se queres aprender GraphQL, vai a un dos meus artigos anteriores.

5. Chats ao estilo de Reddit

Os chats son unha forma de comunicación popular debido á súa sinxeleza e facilidade de uso. Pero o que realmente alimenta as salas de chat modernas? WebSockets!

O que vai aprender:

• Use WebSockets, comunicación en tempo real e actualizacións de datos
• Traballar con niveis de acceso de usuarios (por exemplo, o propietario dunha canle de chat ten o papel admin, e outros na sala - user)
• Procesar e validar formularios - lembre, a xanela de chat para enviar unha mensaxe é input
• Crea e únete a diferentes chats
• Traballar con mensaxes persoais. Os usuarios poden conversar con outros usuarios de forma privada. Esencialmente, establecerá unha conexión WebSocket entre dous usuarios.

6. Navegación estilo raia

O que fai que esta navegación sexa única é que o contenedor popover transfórmase para adaptarse ao contido. Hai unha elegancia nesta transición en comparación co comportamento tradicional de abrir e pechar un novo popover.

O que vai aprender:

• Combina animacións CSS con transicións
• Reduce o contido e aplica clase activa ao elemento flotante

Proba a facelo ti mesmo primeiro, pero se necesitas axuda, consulta isto guía paso a paso.

Fonte: www.habr.com