1. Форма кредитной карты
ʻO ke ʻano kāleka hōʻaiʻē ʻoluʻolu me nā micro-interaction maikaʻi a leʻaleʻa. Loaʻa i ka hoʻopololei helu, ka hōʻoia a me ka ʻike ʻana i ke ʻano kāleka. Hoʻokumu ʻia ia ma Vue.js a pane piha. (Hiki iā ʻoe ke ʻike .)
He aha kāu e aʻo ai:
- Hana a hōʻoia i nā palapala
- E mālama i nā hanana (no ka laʻana, ke hoʻololi nā kahua)
- E hoʻomaopopo i ke ʻano o ka hōʻike a kau ʻana i nā mea ma ka ʻaoʻao, ʻoi aku ka nui o ka ʻike kāleka hōʻaiʻē e ʻike ʻia ma luna o ka palapala
Ua unuhi ʻia ka ʻatikala me ke kākoʻo o EDISON Software, ʻo ia , a me .
2. Гистограмма
ʻO ka histogram kahi pakuhi a i ʻole ka pakuhi e hōʻike ana i ka ʻikepili categorical me nā pahu ʻāpana ʻāpana me nā kiʻekiʻe a i ʻole ka lōʻihi e kūlike me nā waiwai a lākou e hōʻike nei.
Hiki iā lākou ke hoʻohana i ka vertical a i ʻole ka pae. Kapa ʻia ka pakuhi pahu kū i kekahi manawa he pakuhi laina.
He aha kāu e aʻo ai:
- Hōʻike i ka ʻikepili ma ke ʻano i hoʻonohonoho ʻia a hiki ke hoʻomaopopo ʻia
- Eia hou: E aʻo pehea e hoʻohana ai i ka mea
canvasa pehea e huki ai i nā mea me ia
hiki iā ʻoe ke ʻike i ka ʻikepili heluna kanaka o ka honua. Hoʻonohonoho ʻia lākou e ka makahiki.
3. Анимация сердечка Twitter
Ma hope o 2016, ua hoʻolauna ʻo Twitter i kēia ʻano hana kupaianaha no kāna mau tweet. E like me 2019, ʻike mau ia i ka ʻāpana, no laila no ke aha e hana ʻole ai ʻoe iā ʻoe iho?
He aha kāu e aʻo ai:
- E hana me ka ʻano CSS
keyframes - Hoʻoponopono a hoʻoulu i nā mea HTML
- Hoʻohui i ka JavaScript, HTML a me CSS
4. Репозитории GitHub с функцией поиска
ʻAʻohe mea maikaʻi ma aneʻi - ʻo nā waihona waihona ʻo GitHub he papa inoa hanohano.
ʻO ka pahuhopu e hōʻike i nā waihona a ʻae i ka mea hoʻohana e kānana iā lākou. Hoʻohana e kiʻi i nā waihona no kēlā me kēia mea hoʻohana.
ʻAoʻao ʻaoʻao ʻaoʻao GitHub -
He aha kāu e aʻo ai:
- Loaʻa ka ʻikepili mai ka API
- Hōʻike i ka ʻikepili mai API
- Kānā a hōʻike i nā ʻikepili pili no kēlā me kēia hulina
- Koho: Inā makemake ʻoe i kahi paʻakikī, e hoʻohana , kūkulu ʻia me ka hoʻohana ʻana iā GraphQL. .
5. Чаты в стиле Reddit
He ala kaulana nā kamaʻilio ma muli o ko lākou maʻalahi a me ka maʻalahi o ka hoʻohana. Akā he aha ka mea e hoʻoulu ai i nā lumi kamaʻilio hou? Nā Pūnaewele Pūnaewele!
He aha kāu e aʻo ai:
- E hoʻohana i nā WebSockets, kamaʻilio manawa maoli a me nā hōʻano hou
- E hana me nā pae komo o ka mea hoʻohana (no ka laʻana, he kuleana ko ka mea nona ke ala kamaʻilio
admin, a me nā mea ʻē aʻe i loko o ka lumi -user) - Kaʻina a hōʻoia i nā palapala - e hoʻomanaʻo, ʻo ka puka kamaʻilio no ka hoʻouna ʻana i kahi leka
input - Hana a hui pū me nā kamaʻilio like ʻole
- E hana me nā leka pilikino. Hiki i nā mea hoʻohana ke kamaʻilio pilikino me nā mea hoʻohana ʻē aʻe. ʻO ka mea nui, e hoʻokumu ʻoe i kahi pilina WebSocket ma waena o nā mea hoʻohana ʻelua.
6. Навигация в стиле Stripe
ʻO ka mea e ʻokoʻa ai kēia hoʻokele ʻana ʻo ia ka hoʻololi ʻana o ka ipu popover e kūpono i ka ʻike. Aia ka nani o kēia hoʻololi e like me ke ʻano kuʻuna o ka wehe a pani ʻana i kahi popover hou.
He aha kāu e aʻo ai:
- Hoʻohui i nā animation CSS me nā hoʻololi
- E hoʻemi i ka ʻike a hoʻopili i ka papa hana i ka mea lana
Попробуйте сначала сделать это самостоятельно, но если вам нужна помощь, ознакомьтесь с этим .
Source: www.habr.com