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. Жолақ стиліндегі навигация

Бұл шарлауды бірегей ететін нәрсе - қалқымалы контейнер мазмұнға сәйкес келетіндей түрленеді. Жаңа поповерді ашу және жабудың дәстүрлі мінез-құлқымен салыстырғанда бұл ауысудың талғампаздығы бар.

Нені үйренесіз:

• CSS анимацияларын ауысулармен біріктіріңіз
• Мазмұнды күңгірттеңіз және қалқымалы элементке белсенді сыныпты қолданыңыз

Алдымен мұны өзіңіз жасап көріңіз, бірақ көмек қажет болса, мынаны тексеріңіз қадамдық нұсқаулық.

Ақпарат көзі: www.habr.com