ഒരു ഫ്രണ്ട്-എൻഡ് ഡെവലപ്പർക്കുള്ള ആറ് ടാസ്‌ക്കുകൾ

1. ക്രെഡിറ്റ് കാർഡ് ഫോം

സുഗമവും ആസ്വാദ്യകരവുമായ സൂക്ഷ്മ ഇടപെടലുകളുള്ള ഒരു തണുത്ത ക്രെഡിറ്റ് കാർഡ് രൂപം. നമ്പർ ഫോർമാറ്റിംഗ്, സ്ഥിരീകരണം, ഓട്ടോമാറ്റിക് കാർഡ് തരം കണ്ടെത്തൽ എന്നിവ ഉൾപ്പെടുന്നു. ഇത് Vue.js-ൽ നിർമ്മിച്ചതാണ് കൂടാതെ പൂർണ്ണമായി പ്രതികരിക്കുന്നതുമാണ്. (നിങ്ങൾക്ക് കാണാം ഇവിടെ.)

ക്രെഡിറ്റ് കാർഡ്-ഫോം

നിങ്ങൾ എന്ത് പഠിക്കും:

• ഫോമുകൾ പ്രോസസ്സ് ചെയ്യുകയും സാധൂകരിക്കുകയും ചെയ്യുക
• ഇവൻ്റുകൾ കൈകാര്യം ചെയ്യുക (ഉദാഹരണത്തിന്, ഫീൽഡുകൾ മാറുമ്പോൾ)
• പേജിൽ ഘടകങ്ങൾ എങ്ങനെ പ്രദർശിപ്പിക്കാമെന്നും സ്ഥാപിക്കാമെന്നും മനസിലാക്കുക, പ്രത്യേകിച്ച് ഫോമിന് മുകളിൽ ദൃശ്യമാകുന്ന ക്രെഡിറ്റ് കാർഡ് വിവരങ്ങൾ

എഡിസൺ സോഫ്റ്റ്‌വെയറിന്റെ പിന്തുണയോടെയാണ് ലേഖനം വിവർത്തനം ചെയ്തത് പ്രോഗ്രാമർമാരുടെ ആരോഗ്യവും അവരുടെ പ്രഭാതഭക്ഷണവും ശ്രദ്ധിക്കുന്നു, അതുപോലെ തന്നെ ഇഷ്‌ടാനുസൃത സോഫ്റ്റ്‌വെയർ വികസിപ്പിക്കുന്നു.

2. ഹിസ്റ്റോഗ്രാം

ഒരു ഹിസ്റ്റോഗ്രാം എന്നത് ഒരു ചാർട്ട് അല്ലെങ്കിൽ ഗ്രാഫ് ആണ്, അത് അവ പ്രതിനിധീകരിക്കുന്ന മൂല്യങ്ങൾക്ക് ആനുപാതികമായ ഉയരങ്ങളോ നീളമോ ഉള്ള ചതുരാകൃതിയിലുള്ള ബാറുകളുള്ള വർഗ്ഗീകരണ ഡാറ്റയെ പ്രതിനിധീകരിക്കുന്നു.

അവ ലംബമായോ തിരശ്ചീനമായോ പ്രയോഗിക്കാവുന്നതാണ്. ഒരു ലംബ ബാർ ചാർട്ടിനെ ചിലപ്പോൾ ഒരു ലൈൻ ചാർട്ട് എന്ന് വിളിക്കുന്നു.

നിങ്ങൾ എന്ത് പഠിക്കും:

• ഘടനാപരമായതും മനസ്സിലാക്കാവുന്നതുമായ രീതിയിൽ ഡാറ്റ പ്രദർശിപ്പിക്കുക
• കൂടാതെ: ഘടകം എങ്ങനെ ഉപയോഗിക്കണമെന്ന് അറിയുക canvas അതുപയോഗിച്ച് ഘടകങ്ങൾ എങ്ങനെ വരയ്ക്കാമെന്നും

ഇത് നിങ്ങൾക്ക് ലോക ജനസംഖ്യാ ഡാറ്റ കണ്ടെത്താൻ കഴിയും. അവ വർഷം അനുസരിച്ച് തരം തിരിച്ചിരിക്കുന്നു.

3. ട്വിറ്റർ ഹാർട്ട് ആനിമേഷൻ

2016-ൽ, ട്വിറ്റർ അതിൻ്റെ ട്വീറ്റുകൾക്കായി ഈ അത്ഭുതകരമായ ആനിമേഷൻ അവതരിപ്പിച്ചു. 2019-ലെ കണക്കനുസരിച്ച്, അത് ഇപ്പോഴും ഭാഗമായി കാണപ്പെടുന്നു, അതിനാൽ എന്തുകൊണ്ട് സ്വയം ഒരെണ്ണം സൃഷ്ടിച്ചുകൂടാ?

നിങ്ങൾ എന്ത് പഠിക്കും:

• CSS ആട്രിബ്യൂട്ട് ഉപയോഗിച്ച് പ്രവർത്തിക്കുക keyframes
• HTML ഘടകങ്ങൾ കൈകാര്യം ചെയ്യുകയും ആനിമേറ്റ് ചെയ്യുകയും ചെയ്യുക
• JavaScript, HTML, CSS എന്നിവ സംയോജിപ്പിക്കുക

4. തിരയൽ പ്രവർത്തനത്തോടുകൂടിയ GitHub ശേഖരണങ്ങൾ

ഇവിടെ ഫാൻസി ഒന്നുമില്ല - GitHub റിപ്പോസിറ്ററികൾ ഒരു മഹത്തായ പട്ടിക മാത്രമാണ്.
റിപ്പോസിറ്ററികൾ പ്രദർശിപ്പിക്കുകയും അവ ഫിൽട്ടർ ചെയ്യാൻ ഉപയോക്താവിനെ അനുവദിക്കുകയും ചെയ്യുക എന്നതാണ് ലക്ഷ്യം. ഉപയോഗിക്കുക ഔദ്യോഗിക GitHub API ഓരോ ഉപയോക്താവിനും റിപ്പോസിറ്ററികൾ ലഭിക്കുന്നതിന്.

GitHub പ്രൊഫൈൽ പേജ് - github.com/indreklasn

നിങ്ങൾ എന്ത് പഠിക്കും:

• API-ൽ നിന്ന് ഡാറ്റ സ്വീകരിക്കുക
• API-ൽ നിന്നുള്ള ഡാറ്റ പ്രദർശിപ്പിക്കുക
• ഓരോ തിരയലിനും പ്രസക്തമായ ഡാറ്റ ഫിൽട്ടർ ചെയ്ത് കാണിക്കുക
• ഓപ്ഷണൽ: നിങ്ങൾ ഒരു വെല്ലുവിളിക്ക് തയ്യാറാണെങ്കിൽ, ഉപയോഗിക്കുക API v4, GraphQL ഉപയോഗിച്ചാണ് നിർമ്മിച്ചത്. നിങ്ങൾക്ക് GraphQL പഠിക്കണമെങ്കിൽ, എൻ്റെ മുൻ ലേഖനങ്ങളിലൊന്നിലേക്ക് പോകുക.

5. റെഡ്ഡിറ്റ് ശൈലിയിലുള്ള ചാറ്റുകൾ

ചാറ്റുകളുടെ ലാളിത്യവും ഉപയോഗ എളുപ്പവും കാരണം ആശയവിനിമയത്തിനുള്ള ഒരു ജനപ്രിയ മാർഗമാണ്. എന്നാൽ ആധുനിക ചാറ്റ് റൂമുകൾക്ക് ശരിക്കും ഇന്ധനം നൽകുന്നത് എന്താണ്? WebSockets!

നിങ്ങൾ എന്ത് പഠിക്കും:

• WebSockets, തത്സമയ ആശയവിനിമയം, ഡാറ്റ അപ്ഡേറ്റുകൾ എന്നിവ ഉപയോഗിക്കുക
• ഉപയോക്തൃ ആക്സസ് ലെവലുകൾ ഉപയോഗിച്ച് പ്രവർത്തിക്കുക (ഉദാഹരണത്തിന്, ഒരു ചാറ്റ് ചാനലിൻ്റെ ഉടമയ്ക്ക് റോൾ ഉണ്ട് admin, മുറിയിലെ മറ്റുള്ളവരും - user)
• ഫോമുകൾ പ്രോസസ്സ് ചെയ്യുക, സാധൂകരിക്കുക - ഓർമ്മിക്കുക, ഒരു സന്ദേശം അയക്കുന്നതിനുള്ള ചാറ്റ് വിൻഡോ input
• വ്യത്യസ്ത ചാറ്റുകൾ സൃഷ്‌ടിക്കുകയും ചേരുകയും ചെയ്യുക
• വ്യക്തിഗത സന്ദേശങ്ങളുമായി പ്രവർത്തിക്കുക. ഉപയോക്താക്കൾക്ക് മറ്റ് ഉപയോക്താക്കളുമായി സ്വകാര്യമായി ചാറ്റ് ചെയ്യാം. അടിസ്ഥാനപരമായി, നിങ്ങൾ രണ്ട് ഉപയോക്താക്കൾക്കിടയിൽ ഒരു WebSocket കണക്ഷൻ സ്ഥാപിക്കുകയാണ്.

6. സ്ട്രൈപ്പ്-സ്റ്റൈൽ നാവിഗേഷൻ

പോപോവർ കണ്ടെയ്‌നർ ഉള്ളടക്കത്തിന് അനുയോജ്യമായ രീതിയിൽ രൂപാന്തരപ്പെടുന്നു എന്നതാണ് ഈ നാവിഗേഷൻ്റെ പ്രത്യേകത. ഒരു പുതിയ പോപ്പോവർ തുറക്കുകയും അടയ്ക്കുകയും ചെയ്യുന്ന പരമ്പരാഗത സ്വഭാവവുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ ഈ പരിവർത്തനത്തിന് ഒരു ചാരുതയുണ്ട്.

നിങ്ങൾ എന്ത് പഠിക്കും:

• സംക്രമണങ്ങളുമായി CSS ആനിമേഷനുകൾ സംയോജിപ്പിക്കുക
• ഉള്ളടക്കം മങ്ങിക്കുകയും ഫ്ലോട്ടഡ് എലമെൻ്റിലേക്ക് സജീവ ക്ലാസ് പ്രയോഗിക്കുകയും ചെയ്യുക

ആദ്യം ഇത് സ്വയം ചെയ്യാൻ ശ്രമിക്കുക, എന്നാൽ നിങ്ങൾക്ക് സഹായം ആവശ്യമുണ്ടെങ്കിൽ, ഇത് പരിശോധിക്കുക ഘട്ടം ഘട്ടമായുള്ള ഗൈഡ്.

അവലംബം: www.habr.com