Sex uppgifter för en front-end-utvecklare

1. Kreditkortsformulär

En cool kreditkortsform med smidiga och njutbara mikrointeraktioner. Inkluderar nummerformatering, verifiering och automatisk korttypsidentifiering. Den är byggd på Vue.js och är också fullt lyhörd. (Du kan se här.)

kreditkortsformulär

Vad du lär dig:

• Bearbeta och validera blanketter
• Hantera händelser (till exempel när fält ändras)
• Förstå hur du visar och placerar element på sidan, särskilt kreditkortsinformationen som visas överst i formuläret

Artikeln översattes med stöd av EDISON Software, som tar hand om programmerares hälsa och deras frukostOch utvecklar skräddarsydd programvara.

2. Histogram

Ett histogram är ett diagram eller en graf som representerar kategoriska data med rektangulära staplar med höjder eller längder proportionella mot de värden de representerar.

De kan appliceras vertikalt eller horisontellt. Ett vertikalt stapeldiagram kallas ibland ett linjediagram.

Vad du lär dig:

• Visa data på ett strukturerat och begripligt sätt
• Dessutom: Lär dig hur du använder elementet canvas och hur man ritar element med det

Här du kan hitta information om världens befolkning. De är sorterade efter år.

3. Twitter Heart Animation

Redan 2016 introducerade Twitter denna fantastiska animation för sina tweets. Från och med 2019 ser det fortfarande ut som en del, så varför inte skapa en själv?

Vad du lär dig:

• Arbeta med CSS-attribut keyframes
• Manipulera och animera HTML-element
• Kombinera JavaScript, HTML och CSS

4. GitHub-arkiv med sökfunktion

Det finns inget fancy här – GitHub-förråd är bara en glorifierad lista.
Målet är att visa arkiven och låta användaren filtrera dem. Använda sig av officiella GitHub API för att få arkiv för varje användare.

GitHub profilsida - github.com/indreklasn

Vad du lär dig:

• Ta emot data från API
• Visa data från API
• Filtrera och visa relevant data för varje sökning
• Valfritt: Om du är sugen på en utmaning, använd API v4, byggd med GraphQL. Om du vill lära dig GraphQL, gå till en av mina tidigare artiklar.

5. Chattar i Reddit-stil

Chattar är ett populärt sätt att kommunicera på grund av sin enkelhet och användarvänlighet. Men vad är det egentligen som driver moderna chattrum? WebSockets!

Vad du lär dig:

• Använd WebSockets, realtidskommunikation och datauppdateringar
• Arbeta med användaråtkomstnivåer (till exempel har ägaren av en chattkanal rollen admin, och andra i rummet - user)
• Bearbeta och validera formulär - kom ihåg att chattfönstret för att skicka ett meddelande är input
• Skapa och gå med i olika chattar
• Arbeta med personliga meddelanden. Användare kan chatta med andra användare privat. I huvudsak kommer du att upprätta en WebSocket-anslutning mellan två användare.

6. Stripe-stil navigering

Det som gör den här navigeringen unik är att popover-behållaren förvandlas för att passa innehållet. Det finns en elegans i denna övergång jämfört med det traditionella beteendet att öppna och stänga en ny popover.

Vad du lär dig:

• Kombinera CSS-animationer med övergångar
• Dim innehållet och tillämpa aktiv klass på flytande element

Försök att göra det själv först, men om du behöver hjälp, kolla in det här steg för steg guide.

Källa: will.com