Unom ka mga buluhaton alang sa usa ka Front-End developer

1. porma sa credit card

Usa ka cool nga porma sa credit card nga adunay hapsay ug makalingaw nga micro-interaksyon. Naglakip sa pag-format sa numero, pag-verify ug awtomatikong pag-ila sa tipo sa kard. Gitukod kini sa Vue.js ug hingpit usab nga mosanong. (Makita nimo dinhi.)

porma sa credit card

Unsa ang imong makat-unan:

• Pagproseso ug pag-validate sa mga porma
• Pagdumala sa mga panghitabo (pananglitan, kung magbag-o ang mga field)
• Sabta kung giunsa pagpakita ug pagbutang ang mga elemento sa panid, labi na ang impormasyon sa credit card nga makita sa ibabaw sa porma

Ang artikulo gihubad uban ang suporta sa EDISON Software, nga nag-atiman sa kahimsog sa mga programmer ug sa ilang pamahawUg nagpalambo sa naandan nga software.

2. Histogram

Ang histogram kay usa ka tsart o graph nga nagrepresentar sa categorical data nga adunay rectangular bars nga adunay gitas-on o gitas-on nga proporsyonal sa mga value nga ilang girepresentahan.

Mahimo silang i-apply sa vertically o horizontally. Ang bertikal nga bar chart usahay gitawag nga line chart.

Unsa ang imong makat-unan:

• Ipakita ang datos sa usa ka structured ug masabtan nga paagi
• Dugang pa: Pagkat-on unsaon paggamit ang elemento canvas ug unsaon pagdrowing og mga elemento niini

kini mao ang makit-an nimo ang datos sa populasyon sa kalibutan. Gihan-ay sila sa tuig.

3. Twitter Heart Animation

Balik sa 2016, gipaila sa Twitter kining talagsaon nga animation alang sa mga tweet niini. Hangtud sa 2019, kini tan-awon gihapon ang bahin, busa ngano nga dili maghimo usa sa imong kaugalingon?

Unsa ang imong makat-unan:

• Pagtrabaho uban ang CSS attribute keyframes
• Pagmaniobra ug pag-animate sa mga elemento sa HTML
• Paghiusa sa JavaScript, HTML ug CSS

4. GitHub repository nga adunay search function

Wala’y bisan unsa nga nindot dinhi — ang mga repositoryo sa GitHub usa ra ka gihimaya nga lista.
Ang tumong mao ang pagpakita sa mga repositoryo ug tugotan ang tiggamit sa pagsala niini. Paggamit opisyal nga GitHub API aron makakuha mga repository alang sa matag tiggamit.

panid sa profile sa GitHub - github.com/indreklasn

Unsa ang imong makat-unan:

• Pagdawat sa datos gikan sa API
• Ipakita ang datos gikan sa API
• Pagsala ug ipakita ang may kalabutan nga datos alang sa matag pagpangita
• Opsyonal: Kung andam ka sa usa ka hagit, gamita API v4, gitukod gamit ang GraphQL. Kung gusto nimong makat-on sa GraphQL, adto sa usa sa akong miaging mga artikulo.

5. Reddit-estilo nga mga chat

Ang mga chat usa ka popular nga paagi sa komunikasyon tungod sa ilang kayano ug kadali sa paggamit. Apan unsa ba gayod ang nakapadasig sa modernong mga chat room? Mga WebSocket!

Unsa ang imong makat-unan:

• Gamita ang WebSockets, real-time nga komunikasyon ug mga update sa datos
• Pagtrabaho uban ang lebel sa pag-access sa user (pananglitan, ang tag-iya sa usa ka channel sa chat adunay papel admin, ug uban pa sa kwarto - user)
• Pagproseso ug pag-validate sa mga porma - hinumdomi, ang chat window alang sa pagpadala usa ka mensahe input
• Paghimo ug pag-apil sa lainlaing mga chat
• Pagtrabaho uban ang personal nga mga mensahe. Ang mga tiggamit mahimong makig-chat sa ubang mga tiggamit sa pribado. Sa tinuud, magtukod ka usa ka koneksyon sa WebSocket tali sa duha nga tiggamit.

6. Stripe-style nabigasyon

Ang nakapahimo sa kini nga nabigasyon nga talagsaon mao nga ang sulud sa popover nagbag-o aron mohaum sa sulud. Adunay usa ka elegante sa kini nga transisyon kung itandi sa tradisyonal nga pamatasan sa pag-abli ug pagsira sa usa ka bag-ong popover.

Unsa ang imong makat-unan:

• Paghiusa sa mga animation sa CSS sa mga transisyon
• Ipadpad ang sulod ug ipadapat ang aktibong klase sa naglutaw nga elemento

Sulayi ang pagbuhat niini sa imong kaugalingon una, apan kung kinahanglan nimo ang tabang, susiha kini lakang sa lakang nga giya.

Source: www.habr.com