Chwe thasg ar gyfer datblygwr Pen Blaen

1. Ffurflen cerdyn credyd

Siâp cerdyn credyd cŵl gyda micro-ryngweithiadau llyfn a phleserus. Yn cynnwys fformatio rhifau, dilysu a chanfod math o gerdyn yn awtomatig. Mae wedi'i adeiladu ar Vue.js ac mae hefyd yn gwbl ymatebol. (Gallwch weld yma.)

ffurflen cerdyn credyd

Beth fyddwch chi'n ei ddysgu:

• Prosesu a dilysu ffurflenni
• Trin digwyddiadau (er enghraifft, pan fydd meysydd yn newid)
• Deall sut i arddangos a gosod elfennau ar y dudalen, yn enwedig y wybodaeth cerdyn credyd sy'n ymddangos ar ben y ffurflen

Cyfieithwyd yr erthygl gyda chefnogaeth Meddalwedd EDISON, sydd yn gofalu am iechyd rhaglenwyr a'u brecwastAc yn datblygu meddalwedd arferiad.

2. Histogram

Siart neu graff yw histogram sy'n cynrychioli data categorïaidd gyda barrau hirsgwar gydag uchder neu hyd yn gymesur â'r gwerthoedd y maent yn eu cynrychioli.

Gellir eu cymhwyso'n fertigol neu'n llorweddol. Weithiau gelwir siart bar fertigol yn siart llinell.

Beth fyddwch chi'n ei ddysgu:

• Arddangos data mewn ffordd strwythuredig a dealladwy
• Yn ogystal: Dysgwch sut i ddefnyddio'r elfen canvas a sut i dynnu elfennau ag ef

Yma gallwch ddod o hyd i ddata poblogaeth y byd. Maent yn cael eu didoli yn ôl blwyddyn.

3. Animeiddiad Calon Twitter

Yn ôl yn 2016, cyflwynodd Twitter yr animeiddiad anhygoel hwn ar gyfer ei drydariadau. O 2019, mae'n dal i edrych y rhan, felly beth am greu un eich hun?

Beth fyddwch chi'n ei ddysgu:

• Gweithio gyda phriodoledd CSS keyframes
• Trin ac animeiddio elfennau HTML
• Cyfuno JavaScript, HTML a CSS

4. Ystorfeydd GitHub gyda swyddogaeth chwilio

Nid oes unrhyw beth ffansi yma - dim ond rhestr ogoneddus yw ystorfeydd GitHub.
Y nod yw arddangos yr ystorfeydd a chaniatáu i'r defnyddiwr eu hidlo. Defnydd API swyddogol GitHub i gael storfeydd ar gyfer pob defnyddiwr.

Tudalen proffil GitHub - github.com/indreklasn

Beth fyddwch chi'n ei ddysgu:

• Derbyn data gan API
• Arddangos data o API
• Hidlo a dangos data perthnasol ar gyfer pob chwiliad
• Dewisol: Os ydych chi'n barod am her, defnyddiwch API v4, a adeiladwyd gan ddefnyddio GraphQL. Os ydych chi eisiau dysgu GraphQL, ewch i un o fy erthyglau blaenorol.

5. Sgyrsiau arddull Reddit

Mae sgyrsiau yn ffordd boblogaidd o gyfathrebu oherwydd eu bod yn syml ac yn hawdd eu defnyddio. Ond beth sy'n tanio ystafelloedd sgwrsio modern mewn gwirionedd? WebSocedi!

Beth fyddwch chi'n ei ddysgu:

• Defnyddiwch WebSockets, cyfathrebu amser real a diweddariadau data
• Gweithio gyda lefelau mynediad defnyddwyr (er enghraifft, perchennog sianel sgwrsio sydd â'r rôl admin, ac eraill yn yr ystafell - user)
• Prosesu a dilysu ffurflenni - cofiwch, y ffenestr sgwrsio ar gyfer anfon neges yw input
• Creu ac ymuno â gwahanol sgyrsiau
• Gweithio gyda negeseuon personol. Gall defnyddwyr sgwrsio â defnyddwyr eraill yn breifat. Yn y bôn, byddwch yn sefydlu cysylltiad WebSocket rhwng dau ddefnyddiwr.

6. Stripe-arddull llywio

Yr hyn sy'n gwneud y llywio hwn yn unigryw yw bod y cynhwysydd popover yn trawsnewid i gyd-fynd â'r cynnwys. Mae ceinder i'r trawsnewid hwn o'i gymharu â'r ymddygiad traddodiadol o agor a chau popover newydd.

Beth fyddwch chi'n ei ddysgu:

• Cyfuno animeiddiadau CSS gyda thrawsnewidiadau
• Pylu'r cynnwys a chymhwyso dosbarth gweithredol i'r elfen arnawf

Ceisiwch ei wneud eich hun yn gyntaf, ond os oes angen help arnoch, gwiriwch hwn canllaw cam wrth gam.

Ffynhonnell: hab.com