Ntchito zisanu ndi imodzi za wopanga Front-End

1. Fomu ya kirediti kadi

Mawonekedwe abwino a kirediti kadi okhala ndi ma micro-interaction osalala komanso osangalatsa. Zimaphatikizapo masanjidwe a manambala, kutsimikizira ndi kuzindikira mtundu wa makadi okha. Imamangidwa pa Vue.js ndipo imagwiranso ntchito mokwanira. (Mukuwona apa.)

kirediti kadi-fomu

Zomwe mungaphunzire:

• Pangani ndi kutsimikizira mafomu
• Kusamalira zochitika (mwachitsanzo, pamene minda ikusintha)
• Mvetserani momwe mungasonyezere ndikuyika zinthu patsamba, makamaka chidziwitso cha kirediti kadi chomwe chimapezeka pamwamba pa fomuyo

Nkhaniyi idamasuliridwa mothandizidwa ndi EDISON Software, yomwe amasamalira thanzi la opanga mapulogalamu ndi chakudya chawo cham'mawandipo amapanga mapulogalamu achizolowezi.

2. Histogram

Histogram ndi tchati kapena graph yomwe imayimira deta yamagulu okhala ndi timakona tating'onoting'ono tokhala ndi utali kapena utali wolingana ndi zomwe amayimira.

Angagwiritsidwe ntchito vertically kapena horizontally. Tchati choyimirira nthawi zina chimatchedwa tchati cha mzere.

Zomwe mungaphunzire:

• Onetsani deta m'njira yolongosoka komanso yomveka
• Kuonjezerapo: Phunzirani momwe mungagwiritsire ntchito element canvas ndi momwe mungajambule zinthu nazo

ndi mutha kupeza zidziwitso za kuchuluka kwa anthu padziko lonse lapansi. Amasanjidwa ndi chaka.

3. Twitter Mtima Makanema

Kubwerera ku 2016, Twitter idayambitsa makanema odabwitsa awa pama tweets ake. Pofika chaka cha 2019, chikuwonekabe ndi gawo, bwanji osapanga nokha?

Zomwe mungaphunzire:

• Gwirani ntchito ndi CSS keyframes
• Sinthani ndikusintha zinthu za HTML
• Phatikizani JavaScript, HTML ndi CSS

4. Zosungirako za GitHub zokhala ndi ntchito yosaka

Palibe chapamwamba apa-zosungira za GitHub ndi mndandanda waulemerero chabe.
Cholinga chake ndikuwonetsa nkhokwe ndikulola wogwiritsa ntchito kuti azisefa. Gwiritsani ntchito official GitHub API kupeza nkhokwe kwa aliyense wogwiritsa ntchito.

Tsamba la mbiri ya GitHub - github.com/indreklasn

Zomwe mungaphunzire:

• Landirani data kuchokera ku API
• Onetsani data kuchokera ku API
• Sefa ndikuwonetsa zofunikira pakusaka kulikonse
• Zosankha: Ngati muli ndi vuto, gwiritsani ntchito API v4, yomangidwa pogwiritsa ntchito GraphQL. Ngati mukufuna kuphunzira GraphQL, pitani ku imodzi mwazolemba zanga zam'mbuyomu.

5. Macheza amtundu wa Reddit

Macheza ndi njira yotchuka yolankhulirana chifukwa cha kuphweka kwawo komanso kugwiritsa ntchito mosavuta. Koma kodi nchiyani chimene chimasonkhezera malo ochezera amakono amakono? WebSockets!

Zomwe mungaphunzire:

• Gwiritsani ntchito ma WebSockets, kulumikizana nthawi yeniyeni ndi zosintha za data
• Gwirani ntchito ndi magawo ofikira ogwiritsa ntchito (mwachitsanzo, mwiniwake wa tchanelo chochezera ali ndi gawo admin, ndi ena m'chipindamo - user)
• Njira ndi kutsimikizira mafomu - kumbukirani, zenera lochezera potumiza uthenga ndilo input
• Pangani ndikujowina macheza osiyanasiyana
• Gwirani ntchito ndi mauthenga anu. Ogwiritsa ntchito amatha kucheza ndi ena mwachinsinsi. Kwenikweni, mukhala mukukhazikitsa kulumikizana kwa WebSocket pakati pa ogwiritsa ntchito awiri.

6. Mayendedwe amizeremizere

Chomwe chimapangitsa kuyenda uku kukhala kwapadera ndikuti chotengera cha popover chimasinthidwa kuti chigwirizane ndi zomwe zili. Pali kukongola kwa kusinthaku poyerekeza ndi chikhalidwe chachikhalidwe chotsegula ndi kutseka popover yatsopano.

Zomwe mungaphunzire:

• Phatikizani makanema ojambula pa CSS ndi masinthidwe
• Dinitsani zomwe zili ndikugwiritsa ntchito kalasi yogwira ku chinthu choyandama

Yesani kuchita nokha poyamba, koma ngati mukufuna thandizo, fufuzani izi sitepe ndi sitepe kalozera.

Source: www.habr.com