Zes taken voor een Front-End developer

1. Creditcardformulier

Een coole creditcardvorm met soepele en plezierige micro-interacties. Inclusief nummeropmaak, verificatie en automatische kaarttypedetectie. Het is gebouwd op Vue.js en is ook volledig responsief. (Je kan zien hier.)

creditcard-formulier

Wat je leert:

• Formulieren verwerken en valideren
• Gebeurtenissen afhandelen (bijvoorbeeld wanneer velden veranderen)
• Begrijp hoe u elementen op de pagina kunt weergeven en plaatsen, vooral de creditcardgegevens die bovenaan het formulier verschijnen

Het artikel is vertaald met de steun van EDISON Software, dat zorgt voor de gezondheid van programmeurs en hun ontbijtEn ontwikkelt software op maat.

2. Histogram

Een histogram is een diagram of grafiek die categorische gegevens weergeeft met rechthoekige balken waarvan de hoogte of lengte evenredig is aan de waarden die ze vertegenwoordigen.

Ze kunnen verticaal of horizontaal worden toegepast. Een verticaal staafdiagram wordt ook wel een lijndiagram genoemd.

Wat je leert:

• Geef gegevens op een gestructureerde en begrijpelijke manier weer
• Bovendien: leer hoe u het element kunt gebruiken canvas en hoe je er elementen mee kunt tekenen

Hier U kunt gegevens over de wereldbevolking vinden. Ze zijn gesorteerd op jaar.

3. Twitter-hartanimatie

In 2016 introduceerde Twitter deze geweldige animatie voor zijn tweets. Anno 2019 ziet het er nog steeds goed uit, dus waarom zou je er niet zelf een maken?

Wat je leert:

• Werken met CSS-attribuut keyframes
• Manipuleer en animeer HTML-elementen
• Combineer JavaScript, HTML en CSS

4. GitHub-repository's met zoekfunctie

Er is hier niets bijzonders: GitHub-repository's zijn slechts een veredelde lijst.
Het doel is om de repositories weer te geven en de gebruiker in staat te stellen deze te filteren. Gebruik officiële GitHub-API om opslagplaatsen voor elke gebruiker te verkrijgen.

GitHub-profielpagina - github.com/indreklasn

Wat je leert:

• Ontvang gegevens van API
• Gegevens uit API weergeven
• Filter en toon relevante gegevens voor elke zoekopdracht
• Optioneel: Als je zin hebt in een uitdaging, gebruik dan API v4, gebouwd met GraphQL. Als je GraphQL wilt leren, ga dan naar een van mijn eerdere artikelen.

5. Chats in Reddit-stijl

Chats zijn een populair communicatiemiddel vanwege hun eenvoud en gebruiksgemak. Maar wat is de werkelijke brandstof voor moderne chatrooms? WebSockets!

Wat je leert:

• Gebruik WebSockets, realtime communicatie en data-updates
• Werk met gebruikerstoegangsniveaus (de eigenaar van een chatkanaal heeft bijvoorbeeld de rol admin, en anderen in de kamer - user)
• Verwerk en valideer formulieren - onthoud dat het chatvenster voor het verzenden van een bericht is input
• Maak en neem deel aan verschillende chats
• Werk met persoonlijke berichten. Gebruikers kunnen privé met andere gebruikers chatten. In wezen brengt u een WebSocket-verbinding tot stand tussen twee gebruikers.

6. Navigatie in streepstijl

Wat deze navigatie uniek maakt, is dat de popover-container transformeert om bij de inhoud te passen. Deze overgang heeft een elegantie in vergelijking met het traditionele gedrag van het openen en sluiten van een nieuwe popover.

Wat je leert:

• Combineer CSS-animaties met overgangen
• Dim inhoud en pas actieve klasse toe op zwevend element

Probeer het eerst zelf, maar als je hulp nodig hebt, kijk dan eens hier stap voor stap handleiding.

Bron: www.habr.com