ຫົກໜ້າວຽກສຳລັບນັກພັດທະນາ Front-End

1. Форма кредитной карты

ຮູບຮ່າງບັດເຄຣດິດທີ່ເຢັນດ້ວຍການໂຕ້ຕອບກັບຈຸນລະພາກທີ່ລຽບງ່າຍ ແລະມ່ວນຊື່ນ. ລວມມີການຈັດຮູບແບບຕົວເລກ, ການຢັ້ງຢືນ ແລະການກວດຫາປະເພດບັດອັດຕະໂນມັດ. ມັນຖືກສ້າງຂຶ້ນໃນ Vue.js ແລະຍັງຕອບສະຫນອງຢ່າງເຕັມສ່ວນ. (ທ່ານສາມາດເບິ່ງ ທີ່ນີ້.)

ບັດເຄຣດິດ-ແບບຟອມ

ສິ່ງ​ທີ່​ທ່ານ​ຈະ​ຮຽນ​ຮູ້​:

• ຂະບວນການແລະການກວດສອບແບບຟອມ
• ຈັດການເຫດການ (ຕົວຢ່າງ, ເມື່ອຊ່ອງຂໍ້ມູນມີການປ່ຽນແປງ)
• ເຂົ້າໃຈວິທີການສະແດງແລະວາງອົງປະກອບໃນຫນ້າ, ໂດຍສະເພາະຂໍ້ມູນບັດເຄຣດິດທີ່ປາກົດຢູ່ເທິງສຸດຂອງແບບຟອມ

ບົດຄວາມໄດ້ຖືກແປດ້ວຍການສະຫນັບສະຫນູນຂອງຊອບແວ EDISON, ເຊິ່ງ заботится о здоровье программистов и их завтракеແລະ разрабатывает программное обеспечение на заказ.

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

ຮິສໂຕແກຣມແມ່ນຕາຕະລາງ ຫຼືກຣາຟທີ່ສະແດງເຖິງຂໍ້ມູນປະເພດທີ່ມີແຖບສີ່ຫຼ່ຽມມຸມສາກທີ່ມີຄວາມສູງ ຫຼືຄວາມຍາວເປັນສັດສ່ວນກັບຄ່າທີ່ເຂົາເຈົ້າເປັນຕົວແທນ.

ພວກເຂົາສາມາດຖືກນໍາໃຊ້ໃນແນວຕັ້ງຫຼືແນວນອນ. ແຜນວາດແຖບແນວຕັ້ງແມ່ນບາງຄັ້ງເອີ້ນວ່າຕາຕະລາງເສັ້ນ.

ສິ່ງ​ທີ່​ທ່ານ​ຈະ​ຮຽນ​ຮູ້​:

• ສະແດງຂໍ້ມູນໃນຮູບແບບທີ່ມີໂຄງສ້າງແລະເຂົ້າໃຈໄດ້
• ນອກຈາກນັ້ນ: ຮຽນຮູ້ວິທີການນໍາໃຊ້ອົງປະກອບ canvas ແລະວິທີການແຕ້ມອົງປະກອບກັບມັນ

ມັນເປັນ ທ່ານສາມາດຊອກຫາຂໍ້ມູນປະຊາກອນໂລກ. ພວກມັນຖືກຈັດຮຽງຕາມປີ.

3. Анимация сердечка Twitter

ກັບຄືນໄປບ່ອນໃນປີ 2016, Twitter ໄດ້ນໍາສະເຫນີພາບເຄື່ອນໄຫວທີ່ຫນ້າປະຫລາດໃຈນີ້ສໍາລັບ tweets ຂອງມັນ. ໃນປີ 2019, ມັນຍັງຄົງເປັນສ່ວນຫນຶ່ງ, ດັ່ງນັ້ນເປັນຫຍັງຈຶ່ງບໍ່ສ້າງຕົວເອງ?

ສິ່ງ​ທີ່​ທ່ານ​ຈະ​ຮຽນ​ຮູ້​:

• ເຮັດວຽກກັບຄຸນລັກສະນະ CSS keyframes
• ຈັດການ ແລະເຄື່ອນໄຫວອົງປະກອບ HTML
• ສົມທົບ JavaScript, HTML ແລະ CSS

4. Репозитории GitHub с функцией поиска

ບໍ່ມີຫຍັງທີ່ແປກປະຫຼາດຢູ່ທີ່ນີ້—ບ່ອນເກັບມ້ຽນ GitHub ແມ່ນພຽງແຕ່ບັນຊີລາຍຊື່ທີ່ສະຫງ່າລາສີເທົ່ານັ້ນ.
ເປົ້າຫມາຍແມ່ນເພື່ອສະແດງ repositories ແລະອະນຸຍາດໃຫ້ຜູ້ໃຊ້ສາມາດກັ່ນຕອງໃຫ້ເຂົາເຈົ້າ. ໃຊ້ GitHub API ຢ່າງເປັນທາງການ ເພື່ອໃຫ້ໄດ້ຮັບ repositories ສໍາລັບຜູ້ໃຊ້ແຕ່ລະຄົນ.

ຫນ້າໂປຣໄຟລ໌ GitHub - github.com/indreklasn

ສິ່ງ​ທີ່​ທ່ານ​ຈະ​ຮຽນ​ຮູ້​:

• ຮັບຂໍ້ມູນຈາກ API
• ສະແດງຂໍ້ມູນຈາກ API
• ກັ່ນຕອງແລະສະແດງຂໍ້ມູນທີ່ກ່ຽວຂ້ອງສໍາລັບແຕ່ລະການຄົ້ນຫາ
• ທາງ​ເລືອກ​: ຖ້າ​ຫາກ​ວ່າ​ທ່ານ​ສໍາ​ລັບ​ການ​ທ້າ​ທາຍ​, ໃຊ້​ API v4, ສ້າງຂຶ້ນໂດຍໃຊ້ GraphQL. ຖ້າທ່ານຕ້ອງການຮຽນຮູ້ GraphQL, ໄປຫາຫນຶ່ງໃນບົດຄວາມທີ່ຜ່ານມາຂອງຂ້ອຍ.

5. Чаты в стиле Reddit

ການສົນທະນາແມ່ນເປັນວິທີທີ່ນິຍົມຂອງການສື່ສານອັນເນື່ອງມາຈາກຄວາມງ່າຍດາຍແລະຄວາມງ່າຍຂອງການນໍາໃຊ້ຂອງເຂົາເຈົ້າ. ແຕ່ສິ່ງທີ່ເຮັດໃຫ້ຫ້ອງສົນທະນາທີ່ທັນສະໄຫມແມ່ນຫຍັງ? WebSockets!

ສິ່ງ​ທີ່​ທ່ານ​ຈະ​ຮຽນ​ຮູ້​:

• ໃຊ້ WebSockets, ການສື່ສານແບບສົດໆ ແລະອັບເດດຂໍ້ມູນ
• ເຮັດວຽກກັບລະດັບການເຂົ້າເຖິງຂອງຜູ້ໃຊ້ (ຕົວຢ່າງ, ເຈົ້າຂອງຊ່ອງສົນທະນາມີບົດບາດ admin, ແລະອື່ນໆຢູ່ໃນຫ້ອງ - user)
• ຂະບວນການແລະການກວດສອບແບບຟອມ - ຈື່, ປ່ອງຢ້ຽມສົນທະນາສໍາລັບການສົ່ງຂໍ້ຄວາມແມ່ນ input
• ສ້າງແລະເຂົ້າຮ່ວມການສົນທະນາທີ່ແຕກຕ່າງກັນ
• ເຮັດວຽກກັບຂໍ້ຄວາມສ່ວນຕົວ. ຜູ້ໃຊ້ສາມາດສົນທະນາກັບຜູ້ໃຊ້ອື່ນເປັນສ່ວນຕົວ. ໂດຍພື້ນຖານແລ້ວ, ທ່ານຈະສ້າງການເຊື່ອມຕໍ່ WebSocket ລະຫວ່າງສອງຜູ້ໃຊ້.

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

ສິ່ງທີ່ເຮັດໃຫ້ການນໍາທາງນີ້ເປັນເອກະລັກແມ່ນວ່າຖັງ popover ຫັນປ່ຽນໃຫ້ເຫມາະສົມກັບເນື້ອຫາ. ມີຄວາມສະຫງ່າງາມຕໍ່ການຫັນປ່ຽນນີ້ເມື່ອປຽບທຽບກັບພຶດຕິກໍາແບບດັ້ງເດີມຂອງການເປີດແລະປິດ popover ໃຫມ່.

ສິ່ງ​ທີ່​ທ່ານ​ຈະ​ຮຽນ​ຮູ້​:

• ລວມພາບເຄື່ອນໄຫວ CSS ກັບການຫັນປ່ຽນ
• ຈືດເນື້ອໃນ ແລະນຳໃຊ້ຊັ້ນຮຽນທີ່ເຄື່ອນໄຫວຢູ່ກັບອົງປະກອບທີ່ເລື່ອນໄດ້

Попробуйте сначала сделать это самостоятельно, но если вам нужна помощь, ознакомьтесь с этим ຄູ່ມືບາດກ້າວໂດຍຂັ້ນຕອນ.

ແຫຼ່ງຂໍ້ມູນ: www.habr.com