Şeş peywirên ji bo pêşdebirek Front-End

1. Forma karta krediyê

Şêweyek qerta krediyê ya xweş bi danûstendinên mîkro-heval û xweş. Formatkirina hejmarê, verastkirin û tespîtkirina tîpa qerta otomatîkî vedihewîne. Ew li ser Vue.js hatî çêkirin û di heman demê de bi tevahî bersivdar e. (Hûn dikarin bibînin vir.)

forma-karta krediyê

Tiştê ku hûn ê fêr bibin:

• Formên pêvajoyê bikin û rast bikin
• Bûyeran bi rê ve bibin (mînak, dema ku zevî diguherin)
• Fêm bikin ka meriv çawa hêmanan li ser rûpelê nîşan dide û bi cîh dike, nemaze agahdariya qerta krediyê ya ku li jorê formê xuya dike

Gotar bi piştgiriya Nermalava EDISON, ku tê wergerandin balê dikişîne ser tenduristiya bernamenûsan û taştêya wanû herweha nermalava xwerû pêş dixe.

2. Histogram

Histogram nexşeyek an grafîkek e ku daneyên kategorîk bi barên çargoşe yên bi bilindî an dirêjiyên ku li gorî nirxên ku ew temsîl dikin temsîl dike.

Ew dikarin vertîkal an horîzontal bêne sepandin. Nexşeya barkêşê ya vertical carinan wekî nexşeyek rêzê tê gotin.

Tiştê ku hûn ê fêr bibin:

• Daneyên bi rengek çêkirî û têgihîştî nîşan bidin
• Zêdetir: Fêr bibe ka meriv çawa hêmanê bikar tîne canvas û çawa hêmanên bi wê xêzkirin

Ev e hûn dikarin daneyên nifûsa cîhanê bibînin. Ew li gorî salê têne dabeş kirin.

3. Twitter Heart Animation

Di sala 2016-an de, Twitter ev anîmasyona ecêb ji bo tweetên xwe destnîşan kir. Ji sala 2019-an de, ew hîn jî beş xuya dike, ji ber vê yekê çima xwe yek biafirînin?

Tiştê ku hûn ê fêr bibin:

• Bi taybetmendiya CSS re bixebitin keyframes
• Hêmanên HTML-ê manîpule bikin û zindî bikin
• JavaScript, HTML û CSS tevlihev bikin

4. Depoyên GitHub bi fonksiyona lêgerînê

Li vir tiştek ecêb tune - repoyên GitHub tenê navnîşek rûmetdar in.
Armanc ew e ku depoyan nîşan bide û destûrê bide bikarhêner ku wan fîlter bike. Bikaranîn fermî GitHub API ji bo her bikarhênerek depoyan bigirin.

Rûpelê profîla GitHub - github.com/indreklasn

Tiştê ku hûn ê fêr bibin:

• Daneyên ji API-ê bistînin
• Daneyên ji API-ê nîşan bide
• Ji bo her lêgerînê daneyên têkildar Parzîne û nîşan bide
• Vebijarkî: Heke hûn ji bo dijwariyek amade ne, bikar bînin API v4, bi karanîna GraphQL ve hatî çêkirin. Ger hûn dixwazin GraphQL fêr bibin, biçin yek ji gotarên min ên berê.

5. sohbetên bi şêwaza Reddit

Chat ji ber sadebûn û karanîna wan rêyek ragihandinê ya populer e. Lê çi bi rastî odeyên chatê yên nûjen dişewitîne? WebSockets!

Tiştê ku hûn ê fêr bibin:

• WebSockets, ragihandina rast-dem û nûvekirina daneyan bikar bînin
• Bi astên gihîştina bikarhêner re bixebitin (mînak, xwediyê kanalek chatê xwedî rol e admin, û yên din di odeyê de - user)
• Formên pêvajoyê bikin û rast bikin - ji bîr mekin, pencereya chatê ya şandina peyamê ye input
• Sohbetên cihêreng biafirînin û tevlî bibin
• Bi peyamên kesane re bixebitin. Bikarhêner dikarin bi bikarhênerên din re bi taybetî biaxivin. Di bingeh de, hûn ê di navbera du bikarhêneran de têkiliyek WebSocket saz bikin.

6. navîgasyon Stripe-style

Ya ku vê navîgasyonê bêhempa dike ev e ku konteynera popover li gorî naverokê diguhere. Di vê veguheztinê de li gorî tevgera kevneşopî ya vebûn û girtina popoverek nû xweşikbûnek heye.

Tiştê ku hûn ê fêr bibin:

• Anîmasyona CSS-ê bi veguherînan re tevlihev bikin
• Naveroka tarî bikin û çîna çalak li ser hêmana pêvekirî bicîh bikin

Pêşî biceribînin ku wê bi xwe bikin, lê heke hûn hewceyê alîkariyê bin, vê yekê kontrol bikin rêberiya gav bi gav.

Source: www.habr.com