Ses take vir die Front-End-ontwikkelaar

1. Kredietkaartvorm

Koel kredietkaartvorm met gladde en mooi mikro-interaksies. Sluit nommerformatering, validering en outomatiese kaarttipe-opsporing in. Dit is gebou op Vue.js en reageer ook ten volle. (Jy kan sien hier.)

kredietkaartvorm

Wat sal jy leer:

• Verwerk en valideer vorms
• Hanteer gebeure (byvoorbeeld wanneer velde verander)
• Verstaan ​​hoe om elemente op die bladsy te vertoon en te plaas, veral kredietkaartinligting wat bo-op die vorm is

Die artikel is vertaal met die ondersteuning van EDISON Software, wat sorg vir die gesondheid van programmeerders en hul ontbytEn ontwikkel pasgemaakte sagteware.

2. Histogram

'n Staafgrafiek is 'n grafiek of grafiek wat kategoriese data voorstel met reghoekige stawe met hoogtes of lengtes wat eweredig is aan die waardes wat hulle verteenwoordig.

Hulle kan vertikaal of horisontaal toegepas word. 'n Vertikale staafgrafiek word soms 'n lyngrafiek genoem.

Wat sal jy leer:

• Vertoon data op 'n gestruktureerde en verstaanbare manier
• Opsioneel: Leer hoe om die element te gebruik canvas en hoe om elemente daarmee te teken

Hier jy kan wêreldbevolkingsdata vind. Hulle word volgens jaar gesorteer.

3. Twitter Heart Animation

Terug in 2016 het Twitter hierdie wonderlike animasie vir hul tweets bekendgestel. Vanaf 2019 lyk dit steeds ordentlik, so hoekom skep jy nie self een nie?

Wat sal jy leer:

• Werk met CSS-kenmerk keyframes
• Manipuleer en animeer HTML-elemente
• Kombineer JavaScript, HTML en CSS

4. GitHub-bewaarplekke met soekfunksie

Daar is niks ongewoon hier nie - die GitHub-bewaarplekke is net 'n verheerlikte lys.
Die doel is om die bewaarplekke te vertoon en die gebruiker toe te laat om dit te filter. Gebruik amptelike GitHub API om bewaarplekke vir elke gebruiker te kry.

GitHub-profielbladsy github.com/indreklasn

Wat sal jy leer:

• Kry data van API
• Vertoon data vanaf API
• Filter en wys relevante data vir elke soektog
• Opsioneel: As jy gereed is om die oproep te aanvaar, gebruik API v4, geskep met behulp van GraphQL. As jy GraphQL wil leer, gaan na een van my vorige artikels.

5. Reddit-styl geselsies

Geselsies is 'n gewilde manier om te kommunikeer vanweë hul eenvoud en gebruiksgemak. Maar wat is eintlik die krag van moderne kletskamers? web sockets!

Wat sal jy leer:

• Gebruik WebSockets, pas intydse kommunikasie en data-opdaterings toe
• Werk met gebruikerstoegangsvlakke (byvoorbeeld, die eienaar van 'n kletskanaal het die rol adminen ander in die kamer user)
• Verwerk en valideer vorms - onthou, die kletsboks vir die stuur van 'n boodskap is input
• Skep en sluit aan by verskillende kletse
• Werk met privaat boodskappe. Gebruikers kan privaat met ander gebruikers kommunikeer. In wese sal jy 'n WebSocket-verbinding tussen twee gebruikers tot stand bring.

6. Streepstyl navigasie

Die uniekheid van hierdie navigasie is dat die opspringhouer transformeer om by die inhoud te pas. Daar is 'n elegansie aan hierdie oorgang in vergelyking met die tradisionele gedrag om 'n nuwe popover oop te maak en toe te maak.

Wat sal jy leer:

• Kombineer CSS-animasies met oorgange
• Skaker inhoud en pas aktiewe klas toe op drywende element

Probeer dit eers self doen, maar as jy hulp nodig het, kyk hierna stap vir stap gids.

Bron: will.com