Front-End සංවර්ධකයෙකු සඳහා කාර්යයන් හයක්

1. ක්‍රෙඩිට් කාඩ් පෝරමය

සුමට හා විනෝදජනක ක්ෂුද්‍ර අන්තර්ක්‍රියා සහිත සිසිල් ක්‍රෙඩිට් කාඩ් හැඩයක්. අංක හැඩතල ගැන්වීම, සත්‍යාපනය සහ ස්වයංක්‍රීය කාඩ්පත් වර්ගය හඳුනාගැනීම ඇතුළත් වේ. එය Vue.js මත ගොඩනගා ඇති අතර සම්පූර්ණයෙන්ම ප්‍රතිචාර දක්වයි. (ඔබට දැකිය හැකිය මෙහි.)

ක්රෙඩිට් කාඩ් පෝරමය

ඔබ ඉගෙන ගන්නා දේ:

• ආකෘති පත්‍ර සැකසීම සහ වලංගු කිරීම
• සිදුවීම් හසුරුවන්න (උදාහරණයක් ලෙස, ක්ෂේත්‍ර වෙනස් වන විට)
• විශේෂයෙන් පෝරමයේ ඉහළින් දිස්වන ක්‍රෙඩිට් කාඩ්පත් තොරතුරු පිටුවේ මූලද්‍රව්‍ය ප්‍රදර්ශනය කරන්නේ කෙසේද සහ ස්ථානගත කරන්නේ කෙසේද යන්න තේරුම් ගන්න

ලිපිය පරිවර්තනය කරන ලද්දේ EDISON මෘදුකාංගයේ සහය ඇතිවය ක්‍රමලේඛකයින්ගේ සෞඛ්‍යය සහ ඔවුන්ගේ උදේ ආහාරය ගැන සැලකිලිමත් වේ, මෙන්ම අභිරුචි මෘදුකාංග සංවර්ධනය කරයි.

2. හිස්ටෝග්රෑම්

හිස්ටෝග්‍රෑම් යනු ඒවා නියෝජනය කරන අගයන්ට සමානුපාතික උස හෝ දිග සහිත සෘජුකෝණාස්‍රාකාර තීරු සහිත වර්ගීකරණ දත්ත නියෝජනය කරන ප්‍රස්ථාරයක් හෝ ප්‍රස්ථාරයකි.

ඒවා සිරස් අතට හෝ තිරස් අතට යෙදිය හැකිය. සිරස් තීරු ප්‍රස්ථාරයක් සමහර විට රේඛා ප්‍රස්ථාරයක් ලෙස හැඳින්වේ.

ඔබ ඉගෙන ගන්නා දේ:

• ව්‍යුහගත සහ තේරුම් ගත හැකි ආකාරයෙන් දත්ත පෙන්වන්න
• අතිරේකව: මූලද්රව්යය භාවිතා කරන ආකාරය ඉගෙන ගන්න canvas සහ එය සමඟ මූලද්රව්ය අඳින්නේ කෙසේද

එය ඔබට ලෝක ජනගහන දත්ත සොයාගත හැකිය. ඒවා වසර අනුව වර්ග කර ඇත.

3. ට්විටර් හෘද සජීවිකරණය

නැවතත් 2016 දී, Twitter විසින් සිය ට්වීට් සඳහා මෙම විශ්මයජනක සජීවිකරණය හඳුන්වා දෙන ලදී. 2019 වන විට, එය තවමත් කොටසක් ලෙස පෙනේ, එබැවින් ඔබම එකක් නිර්මාණය නොකරන්නේ මන්ද?

ඔබ ඉගෙන ගන්නා දේ:

• CSS ගුණාංගය සමඟ වැඩ කරන්න keyframes
• HTML මූලද්‍රව්‍ය හැසිරවීම සහ සජීවීකරණය කිරීම
• JavaScript, HTML සහ CSS ඒකාබද්ධ කරන්න

4. සෙවුම් කාර්යය සහිත GitHub ගබඩාවන්

මෙහි විචිත්‍රවත් කිසිවක් නැත - GitHub ගබඩාවන් යනු උත්කර්ෂවත් ලැයිස්තුවක් පමණි.
ඉලක්කය වන්නේ ගබඩාවන් ප්රදර්ශනය කිරීම සහ පරිශීලකයාට ඒවා පෙරීමට ඉඩ දීමයි. භාවිත නිල GitHub API එක් එක් පරිශීලකයා සඳහා ගබඩා ලබා ගැනීමට.

GitHub පැතිකඩ පිටුව - github.com/indreklasn

ඔබ ඉගෙන ගන්නා දේ:

• API වෙතින් දත්ත ලබා ගන්න
• API වෙතින් දත්ත පෙන්වන්න
• එක් එක් සෙවුම සඳහා අදාළ දත්ත පෙරීම සහ පෙන්වන්න
• විකල්ප: ඔබ අභියෝගයක් සඳහා සූදානම් නම්, භාවිතා කරන්න ඒපීඅයි v4, GraphQL භාවිතයෙන් ගොඩනගා ඇත. ඔබට GraphQL ඉගෙන ගැනීමට අවශ්‍ය නම්, මගේ පෙර ලිපි වලින් එකකට යන්න.

5. Reddit ආකාරයේ කතාබස්

කතාබස් යනු ඒවායේ සරල බව සහ භාවිතයේ පහසුව නිසා ජනප්‍රිය සන්නිවේදන ක්‍රමයකි. නමුත් නවීන කතාබස් කාමරවලට ඇත්තටම ඉන්ධන සපයන්නේ කුමක්ද? WebSockets!

ඔබ ඉගෙන ගන්නා දේ:

• WebSockets, තත්‍ය කාලීන සන්නිවේදනය සහ දත්ත යාවත්කාලීන භාවිතා කරන්න
• පරිශීලක ප්‍රවේශ මට්ටම් සමඟ වැඩ කරන්න (උදාහරණයක් ලෙස, චැට් නාලිකාවක හිමිකරුට භූමිකාව ඇත admin, සහ කාමරයේ සිටින අනෙකුත් අය - user)
• ආකෘති සැකසීම සහ වලංගු කිරීම - මතක තබා ගන්න, පණිවිඩයක් යැවීම සඳහා කතාබස් කවුළුව වේ input
• විවිධ කතාබස් සාදන්න සහ සම්බන්ධ වන්න
• පුද්ගලික පණිවිඩ සමඟ වැඩ කරන්න. පරිශීලකයින්ට වෙනත් පරිශීලකයින් සමඟ පුද්ගලිකව කතාබස් කළ හැකිය. අත්යවශ්යයෙන්ම, ඔබ පරිශීලකයින් දෙදෙනෙකු අතර WebSocket සම්බන්ධතාවයක් ස්ථාපිත කරනු ඇත.

6. තීරු ආකාරයේ සංචලනය

මෙම සංචලනය සුවිශේෂී වන්නේ popover බහාලුම අන්තර්ගතයට ගැලපෙන පරිදි පරිවර්තනය වීමයි. නව popover විවෘත කිරීම සහ වසා දැමීමේ සාම්ප්රදායික හැසිරීම් වලට සාපේක්ෂව මෙම සංක්රමණයට අලංකාරයක් ඇත.

ඔබ ඉගෙන ගන්නා දේ:

• CSS සජීවිකරණ සංක්‍රාන්ති සමඟ ඒකාබද්ධ කරන්න
• අන්තර්ගතය අඳුරු කර පාවෙන මූලද්‍රව්‍යයට ක්‍රියාකාරී පන්තිය යොදන්න

මුලින්ම එය ඔබම කිරීමට උත්සාහ කරන්න, නමුත් ඔබට උදව් අවශ්‍ය නම්, මෙය බලන්න පියවරෙන් පියවර මාර්ගෝපදේශය.

මූලාශ්රය: www.habr.com