កិច្ចការប្រាំមួយសម្រាប់អ្នកអភិវឌ្ឍន៍ Front-End

1. ទម្រង់ប័ណ្ណឥណទាន

ទម្រង់កាតឥណទានដ៏ត្រជាក់ ជាមួយនឹងអន្តរកម្មខ្នាតតូចដ៏រលូន និងរីករាយ។ រួមបញ្ចូលការធ្វើទ្រង់ទ្រាយលេខ ការផ្ទៀងផ្ទាត់ និងការរកឃើញប្រភេទកាតដោយស្វ័យប្រវត្តិ។ វាត្រូវបានបង្កើតឡើងនៅលើ Vue.js ហើយក៏មានការឆ្លើយតបយ៉ាងពេញលេញផងដែរ។ (អ្នកអាចមើលឃើញ នៅទីនេះ.)

ទម្រង់កាតឥណទាន

អ្វីដែលអ្នកនឹងរៀន៖

• ដំណើរការនិងធ្វើឱ្យទម្រង់មានសុពលភាព
• ដោះស្រាយព្រឹត្តិការណ៍ (ឧទាហរណ៍ នៅពេលដែលវាលផ្លាស់ប្តូរ)
• ស្វែងយល់ពីរបៀបបង្ហាញ និងដាក់ធាតុនៅលើទំព័រ ជាពិសេសព័ត៌មានកាតឥណទានដែលបង្ហាញនៅផ្នែកខាងលើនៃទម្រង់

អត្ថបទនេះត្រូវបានបកប្រែដោយមានការគាំទ្រពីកម្មវិធី EDISON ដែល ថែរក្សាសុខភាពរបស់អ្នកសរសេរកម្មវិធី និងអាហារពេលព្រឹករបស់ពួកគេ។, ក៏ដូចជា បង្កើតកម្មវិធីផ្ទាល់ខ្លួន.

2. អ៊ីស្តូក្រាម

អ៊ីស្តូក្រាម គឺជាគំនូសតាង ឬក្រាហ្វដែលតំណាងឱ្យទិន្នន័យប្រភេទដែលមានរបារចតុកោណដែលមានកម្ពស់ ឬប្រវែងសមាមាត្រទៅនឹងតម្លៃដែលពួកគេតំណាង។

ពួកគេអាចត្រូវបានអនុវត្តបញ្ឈរឬផ្ដេក។ គំនូសតាងរបារបញ្ឈរជួនកាលត្រូវបានគេហៅថាគំនូសតាងបន្ទាត់។

អ្វីដែលអ្នកនឹងរៀន៖

• បង្ហាញទិន្នន័យតាមរបៀបដែលមានរចនាសម្ព័ន្ធ និងអាចយល់បាន។
• បន្ថែម៖ រៀនពីរបៀបប្រើធាតុ canvas និងរបៀបគូរធាតុជាមួយវា។

វាគឺជាការ អ្នកអាចស្វែងរកទិន្នន័យចំនួនប្រជាជនពិភពលោក។ ពួកវាត្រូវបានតម្រៀបតាមឆ្នាំ។

3. Twitter Heart Animation

ត្រលប់ទៅឆ្នាំ 2016 Twitter បានណែនាំចលនាដ៏អស្ចារ្យនេះសម្រាប់ tweets របស់ខ្លួន។ គិតត្រឹមឆ្នាំ 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. ការរុករករចនាប័ទ្មឆ្នូត

អ្វី​ដែល​ធ្វើ​ឱ្យ​ការ​រុករក​នេះ​មាន​លក្ខណៈ​ពិសេស​នោះ​គឺ​ថា​កុងតឺន័រ popover បំប្លែង​ឱ្យ​សម​នឹង​មាតិកា។ មានភាពឆើតឆាយចំពោះការផ្លាស់ប្តូរនេះបើប្រៀបធៀបទៅនឹងអាកប្បកិរិយាបែបប្រពៃណីនៃការបើក និងបិទផ្ទាំងពាណិជ្ជកម្មថ្មី។

អ្វីដែលអ្នកនឹងរៀន៖

• ផ្សំចលនា CSS ជាមួយនឹងការផ្លាស់ប្តូរ
• បន្ថយខ្លឹមសារ និងអនុវត្តថ្នាក់សកម្មទៅធាតុអណ្តែត

សាកល្បងធ្វើវាដោយខ្លួនឯងជាមុនសិន ប៉ុន្តែប្រសិនបើអ្នកត្រូវការជំនួយ សូមពិនិត្យមើលវា។ ការណែនាំជាជំហាន ៗ.

ប្រភព: www.habr.com