Sechs Aufgaben fir e Front-End Entwéckler

1. Kreditkaart Form

Eng cool Kreditkaart Form mat glat an agreabel Mikro-Interaktiounen. Ëmfaasst Nummerformatéierung, Verifizéierung an automatesch Kaartentypdetektioun. Et ass op Vue.js gebaut an ass och voll reaktiounsfäeger. (Du kanns gesinn hei.)

Kreditkaart Form

Wat Dir léiert:

• Veraarbecht a validéieren Formen
• Ëmgank Evenementer (zum Beispill, wann Felder änneren)
• Verstinn wéi Elementer op der Säit ze weisen an ze placéieren, besonnesch d'Kreditkaartinformatioun déi uewen op der Form erschéngt

Den Artikel gouf mat der Ënnerstëtzung vun der EDISON Software iwwersat, déi këmmert sech ëm d'Gesondheet vun de Programméierer an hirem Frühstück, wéi och entwéckelt personaliséiert Software.

2. Histogramm

En Histogramm ass eng Grafik oder Grafik déi kategoresch Daten duerstellt mat rechteckege Baren mat Héichten oder Längt proportional zu de Wäerter déi se representéieren.

Si kënne vertikal oder horizontal applizéiert ginn. E vertikale Staangdiagramm gëtt heiansdo e Linnendiagramm genannt.

Wat Dir léiert:

• Weist Daten op eng strukturéiert a verständlech Manéier
• Zousätzlech: Léiert wéi een dat Element benotzt canvas a wéi Elementer domat ze zéien

et ass Dir kënnt Weltbevëlkerungsdaten fannen. Si sinn no Joer zortéiert.

3. Twitter Häerz Animatioun

Zréck am Joer 2016 huet Twitter dës erstaunlech Animatioun fir seng Tweets agefouert. Zënter 2019 gesäit et nach ëmmer deen Deel aus, also firwat net een selwer erstellen?

Wat Dir léiert:

• Schafft mat CSS Attributer keyframes
• Manipuléieren an animéieren HTML Elementer
• Kombinéiert JavaScript, HTML an CSS

4. GitHub Repositories mat Sichfunktioun

Et gëtt näischt Fancy hei - GitHub Repositories si just eng verherrlecht Lëscht.
D'Zil ass d'Repositories ze weisen an de Benotzer ze erlaben se ze filteren. Benotzt offiziell GitHub API fir Repositories fir all Benotzer ze kréien.

GitHub Profil Säit - github.com/indreklasn

Wat Dir léiert:

• Kréien Daten aus API
• Weist Daten aus API
• Filter a weisen relevant Donnéeën fir all Sich
• Optional: Wann Dir op eng Erausfuerderung sidd, benotzt API v4, gebaut mat GraphQL. Wann Dir GraphQL léiere wëllt, gitt op ee vu menge fréieren Artikelen.

5. Reddit-Stil Chats

Chats sinn eng populär Manéier fir Kommunikatioun wéinst hirer Einfachheet an einfacher Benotzung. Awer wat bréngt wierklech modern Chatraim? WebSockets!

Wat Dir léiert:

• Benotzt WebSockets, Echtzäit Kommunikatioun an Datenupdates
• Schafft mat Benotzer Zougang Niveauen (zum Beispill, de Besëtzer vun engem Chat Kanal huet d'Roll admin, an anerer am Raum - user)
• Prozess an validéieren Formen - erënneren, d'Chat Fënster fir e Message schécken ass input
• Erstellt a maacht mat bei verschiddene Chats
• Schafft mat perséinleche Messagen. D'Benotzer kënne mat anere Benotzer privat chatten. Wesentlech wäert Dir eng WebSocket Verbindung tëscht zwee Benotzer opbauen.

6. Sträif-Stil Navigatioun

Wat dës Navigatioun eenzegaarteg mécht ass datt de Popover Container transforméiert fir den Inhalt ze passen. Et gëtt eng Eleganz zu dësem Iwwergang am Verglach zum traditionelle Verhalen vun engem neie Popover opzemaachen an zou ze maachen.

Wat Dir léiert:

• Kombinéiert CSS Animatiounen mat Iwwergäng
• Dim Inhalt an gëllen aktiv Klass op gefloss Element

Probéiert et fir d'éischt selwer ze maachen, awer wann Dir Hëllef braucht, kuckt dëst eraus Schrëtt fir Schrëtt Guide.

Source: will.com