Front-End иштеп чыгуучусу үчүн алты тапшырма

1. Кредиттик карта формасы

Жылмакай жана жагымдуу микро карым-катнаштары бар салкын кредиттик карта формасы. Санды форматтоо, текшерүү жана карта түрүн автоматтык түрдө аныктоону камтыйт. Бул Vue.js боюнча курулган жана ошондой эле толугу менен жооп берет. (Сиз көрө аласыз бул жерде.)

кредиттик карта формасы

Эмнени үйрөнөсүз:

• Формаларды иштетүү жана текшерүү
• Окуяларды иштетүү (мисалы, талаалар өзгөргөндө)
• Беттеги элементтерди, өзгөчө форманын үстүндө пайда болгон кредиттик карта маалыматын кантип көрсөтүүнү жана жайгаштырууну түшүнүңүз

Макала EDISON Software компаниясынын колдоосу менен которулган программисттердин ден соолугуна жана алардын эртең мененки тамактарына кам көрөт, дагы атайын программалык камсыздоону иштеп чыгат.

2. Гистограмма

Гистограмма - бул тик бурчтуу тилкелер менен категориялык маалыматтарды чагылдырган диаграмма же график, алар көрсөткөн маанилерге пропорционалдуу бийиктиги же узундугу.

Алар тигинен же туурасынан колдонулушу мүмкүн. Тик тилкелүү диаграмма кээде сызык диаграмма деп аталат.

Эмнени үйрөнөсүз:

• Дайындарды структураланган жана түшүнүктүү түрдө көрсөтүү
• Кошумча: элементти кантип колдонууну үйрөнүңүз canvas жана аны менен элементтерди кантип тартуу керек

бул дүйнө калкынын маалыматтарын таба аласыз. Алар жыл боюнча сорттолот.

3. Twitter Heart Animation

2016-жылы Twitter өзүнүн твиттери үчүн бул укмуштуудай анимацияны киргизген. 2019-жылга карата, ал дагы эле бир бөлүгү болуп саналат, анда эмне үчүн өзүңүз түзбөйсүз?

Эмнени үйрөнөсүз:

• CSS атрибуту менен иштөө keyframes
• HTML элементтерин башкарыңыз жана анимациялаңыз
• JavaScript, HTML жана CSS айкалыштыруу

4. Издөө функциясы бар GitHub репозиторийлери

Бул жерде кооз эч нерсе жок — GitHub репозиторийлери жөн гана даңкталган тизме.
Максаты - репозиторийлерди көрсөтүү жана колдонуучуга аларды чыпкалоого мүмкүнчүлүк берүү. Колдонуу расмий GitHub API ар бир колдонуучу үчүн репозиторийлерди алуу.

GitHub профиль барагы - github.com/indreklasn

Эмнени үйрөнөсүз:

• API дайындарын алуу
• API дайындарын көрсөтүү
• Чыпкалоо жана ар бир издөө үчүн тиешелүү маалыматтарды көрсөтүү
• Кошумча: Эгер сиз кыйынчылыкка даяр болсоңуз, колдонуңуз API v4, GraphQL аркылуу курулган. Эгер сиз GraphQLди үйрөнгүңүз келсе, менин мурунку макалаларымдын бирине өтүңүз.

5. Reddit стилиндеги чаттар

Жөнөкөйлүгүнөн жана колдонууга ыңгайлуулугунан улам чаттар – баарлашуунун популярдуу ыкмасы. Бирок, чынында, заманбап чат бөлмөлөрүн күйүүчү эмне? WebSockets!

Эмнени үйрөнөсүз:

• WebSockets, реалдуу убакытта байланыш жана маалымат жаңыртууларын колдонуңуз
• Колдонуучунун кирүү деңгээли менен иштөө (мисалы, чат каналынын ээси роль ойнойт admin, жана башка бөлмөдө - user)
• Формаларды иштетүү жана текшерүү - эсиңизде болсун, билдирүү жөнөтүү үчүн чат терезеси input
• Ар кандай чаттар түзүңүз жана кошулуңуз
• Жеке билдирүүлөр менен иштөө. Колдонуучулар башка колдонуучулар менен жеке баарлаша алышат. Негизи, сиз эки колдонуучунун ортосунда WebSocket байланышын орнотосуз.

6. Stripe стилиндеги навигация

Бул навигацияны уникалдуу кылган нерсе, поповер контейнер мазмунга ылайыктуу болуп өзгөрөт. Жаңы поповерди ачуу жана жабуунун салттуу жүрүм-турумуна салыштырмалуу бул өткөөлдүн бир көрктүүлүгү бар.

Эмнени үйрөнөсүз:

• CSS анимацияларын өтүү менен айкалыштырыңыз
• Мазмунду бүдөмүктөп, сүзүүчү элементке активдүү классты колдонуңуз

Адегенде өзүңүз жасап көрүңүз, бирок жардам керек болсо, муну текшериңиз кадам-кадам көрсөтмө.

Source: www.habr.com