Front-end dojo: සංවර්ධක කුසලතා පුහුණු කිරීමේ ව්‍යාපෘති (නව 5 + 43 පැරණි)

1. සංකල්ප ක්ලෝනය

Notion යෙදුම බොහෝ දෙනා විසින් ආදරය කරනු ලැබේ; එය ඔබගේ කාර්ය ප්‍රවාහය ප්‍රශස්ත කිරීමට, ලේඛන සමඟ වැඩ කිරීමට, කාර්ය සටහන් කිරීමට සහ උපාංග අතර දත්ත සමමුහුර්ත කිරීමට ඉඩ සලසයි.

www.notion.so

සංකල්ප ක්ලෝනයක් නිර්මාණය කිරීමෙන් ඔබ ඉගෙන ගන්නා දේ:

• HTML Drag and drop API. පරිශීලකයාට "මූසිකය සමඟ අල්ලා ගත හැක" ඇදගෙන යා හැකි මූලද්රව්යය සහ එය තුළ තබන්න අතහැරිය හැකි කලාපය.
• ඔබගේ පරිගණකය සහ ස්මාර්ට් ජංගම දුරකථනය අතර තථ්‍ය කාලීන දත්ත සමමුහුර්ත කරන්නේ කෙසේද.
• අපි පරිශීලකයින්ට වාර්තා සෑදීමට, කියවීමට, යාවත්කාලීන කිරීමට සහ මකා දැමීමට ඉඩ සලසයි, එමගින් CRUD කුසලතා පුහුණු කරන්න.

ලිපිය පරිවර්තනය කරන ලද්දේ EDISON මෘදුකාංගයේ සහය ඇතිවය යෙදුම් සහ වෙබ් අඩවි සංවර්ධනය කරයි, මෙන්ම ආරම්භක සඳහා ආයෝජනය කරයි.

2. Repl.it ක්ලෝනය

Repl.it යනු තත්‍ය කාලීන සහයෝගී කේත සංස්කරණය සඳහා වූ මෙවලමකි. ඔබට භාෂා කිහිපයක් තෝරා ගත හැකිය: JavaScript, Python, Go සහ බ්‍රවුසරයේ කේතය කෙලින්ම ධාවනය කරන්න. ඉක්මන් demos සහ කේත සම්මුඛ සාකච්ඡා සඳහා ඉතා ප්‍රයෝජනවත් වේ.

rep.it

Repl.it ක්ලෝනයක් නිර්මාණය කිරීමෙන් ඔබ ඉගෙන ගන්නා දේ:

• බ්‍රවුසරයේ (සේවාදායක පැත්තේ) කේතය (සේවාදායක පැත්ත) ධාවනය කර ක්‍රියාත්මක කරන්නේ කෙසේද.
• ආදාන දත්ත (මූලාශ්ර කේතය) කියවා ක්රියාත්මක කිරීමේ ප්රතිඵලය පෙන්වන්න.
• වෙබයේ ගොනු සහ ෆෝල්ඩර සාදා ප්‍රතිඵල සුරකින ආකාරය.
• කේත සින්ටැක්ස් ඉස්මතු කරන්නේ කෙසේද.

3. Google ඡායාරූප ක්ලෝනය

Google ඡායාරූප යනු ඡායාරූප ගබඩා කිරීම සහ බෙදාගැනීම සඳහා වූ සේවාවකි.
ඕනෑම නවීන ඡායාරූප යෙදුමකට මූලික කාර්යයන් ඉටු කළ හැකිය: උඩුගත කිරීම, කැපීම, ආදිය. මිනිසුන්ට ඔවුන්ගේම අවතාර නිර්මාණය කිරීමට සහ බළලුන්ගේ ඡායාරූප බෙදා ගැනීමට අවශ්‍ය වේ, එබැවින් ඔබට පින්තූර සමඟ වැඩ කිරීමට හැකි විය යුතුය.

www.google.com/photos/about

Google ඡායාරූප ක්ලෝනයක් සෑදීමෙන් ඔබ ඉගෙන ගන්නා දේ:

• දුරකථන, ටැබ්ලට්, ලැප්ටොප් සහ දැවැන්ත රූපවාහිනී තිරවල පවා ප්‍රතිචාරාත්මක රූප නිර්මාණය කරන්නේ කෙසේද.
• රූප උඩුගත කිරීම්, විශේෂයෙන් විශාල පින්තූර (>1MB) සහ තොග උඩුගත කිරීම් හසුරුවන්නේ කෙසේද.
• පින්තූර ගොනු සැකසීම, සිඟිති රූ සඳහා ඡායාරූප කැපීම සහ ප්‍රමාණය වෙනස් කිරීම හෝ ගැලරියක් විවෘත කිරීමේදී.
• පාරිතෝෂිකය: වලාකුළු හෝ දේශීය දත්ත ගබඩාවේ පින්තූර ගබඩා කරන්නේ කෙසේද.

4. Gifsky ක්ලෝනය

ගිෆ්ස්කි කාර්යයන් භාවිතයෙන් වීඩියෝව GIF බවට පරිවර්තනය කරයිpngquant කාර්යක්ෂම හරස් රාමු තල සහ තාවකාලික ප්‍රති-අන්වර්ථකරණය සඳහා. එහි ප්‍රතිඵලය වන්නේ රාමුවකට මල් දහස් ගණනක් සහිත GIF ය.

gif.ski

Gifski ක්ලෝනයක් නිර්මාණය කිරීමෙන් ඔබ ඉගෙන ගන්නා දේ:

• වීඩියෝ ගොනු (.mp4 සිට .gif දක්වා) පරිවර්තනය කරන්නේ කෙසේද?
• Drag and Drop HTML API භාවිතා කරන්නේ කෙසේද.
• රූප ප්‍රශස්තකරණය සහ සැකසීම ක්‍රියා කරන ආකාරය.

සටහන: Gifsky යනු විවෘත මූලාශ්‍ර ව්‍යාපෘතියකි සහ GitHub මත ඇත!

5. ගුප්තකේතන මුදල් අනුපාත නිරීක්ෂණය කිරීම

ප්‍රතික්‍රියා දේශීය ගුප්ත ව්‍යවහාර මුදල් ට්‍රැකර්

මුදල් අනුපාත ට්රැකර් නිර්මාණය කිරීමෙන් ඔබ ඉගෙන ගන්නා දේ:

• API සමඟ වැඩ කරන්නේ කෙසේද සහ API වෙතින් දුරස්ථව දත්ත ලබා ගන්නේ කෙසේද.
• ලැයිස්තුවක් ලෙස දත්ත පෙන්වන්නේ කෙසේද.
• පාරිතෝෂිකය: ඔබ කැමති නම්, මම මෑතකදී ලිව්වා මිල ට්රැකර් නිර්මාණය කිරීම පිළිබඳ නිබන්ධනය React Native සමඟ cryptocurrency සඳහා.

සටහන: මෙහි GitHub උදාහරණ ගබඩාව.

පෙර ප්‍රකාශන වලින් ව්‍යාපෘති තෝරා ගැනීමක්.

වන ස්ථරය තුළ දත්ත

www.reddit.com/r/layer

ස්තරය යනු බෙදාගත් "පුවරුව" මත සෑම කෙනෙකුටම පික්සලයක් ඇඳිය ​​හැකි ප්‍රජාවකි. මුල් අදහස Reddit මත උපත ලැබීය. r/Layer ප්‍රජාව යනු හවුල් නිර්මාණශීලීත්වය සඳහා රූපකයකි, සෑම කෙනෙකුටම නිර්මාණකරුවෙකු විය හැකි අතර පොදු අරමුණකට දායක විය හැක.

ඔබේම ස්ථර ව්‍යාපෘතියක් නිර්මාණය කිරීමේදී ඔබ ඉගෙන ගන්නා දේ:

• ජාවාස්ක්‍රිප්ට් කැන්වස් ක්‍රියා කරන ආකාරය කැන්වසයක් ක්‍රියාත්මක කරන ආකාරය දැන ගැනීම බොහෝ යෙදුම්වල තීරණාත්මක කුසලතාවයකි.
• පරිශීලක අවසර සම්බන්ධීකරණය කරන්නේ කෙසේද. සෑම පරිශීලකයෙකුටම ලොග් වීමකින් තොරව සෑම විනාඩි 15 කට වරක් එක් පික්සලයක් ඇඳිය ​​හැකිය.
• කුකී සැසි සාදන්න.

ස්කොෂ්

squoosh.app

Squoosh යනු බොහෝ උසස් විකල්ප සහිත රූප සම්පීඩන යෙදුමකි.

GIF 20 MB

Squoosh හි ඔබේම අනුවාදයක් නිර්මාණය කිරීමෙන් ඔබ ඉගෙන ගනු ඇත:

• පින්තූර ප්‍රමාණය සමඟ වැඩ කරන්නේ කෙසේද
• Drag'n'Drop API හි මූලික කරුණු ඉගෙන ගන්න
• API සහ සිදුවීම් සවන්දෙන්නන් ක්‍රියා කරන ආකාරය තේරුම් ගන්න
• ගොනු උඩුගත කිරීම සහ අපනයනය කරන ආකාරය

සටහන: රූප සම්පීඩකය දේශීය වේ. සේවාදායකයට අමතර දත්ත යැවීම අවශ්ය නොවේ. ඔබට සම්පීඩකය නිවසේ තිබිය හැකිය, නැතහොත් ඔබට එය සේවාදායකයක භාවිතා කළ හැකිය, ඔබේ අභිමතය පරිදි.

කැල්කියුලේටරය

ඉදිරියට එන්න? බරපතල ලෙස? කැල්කියුලේටරය? ඔව්, හරියටම, ගණක යන්ත්‍රයක්. ගණිත ක්‍රියා වල මූලික කරුණු සහ ඒවා එකට ක්‍රියා කරන ආකාරය අවබෝධ කර ගැනීම ඔබගේ යෙදුම් සරල කිරීම සඳහා ඉතා වැදගත් කුසලතාවකි. ඉක්මනින් හෝ පසුව ඔබට අංක සමඟ කටයුතු කිරීමට සිදුවනු ඇති අතර ඉක්මනින් වඩා හොඳය.

jarodburchill.github.io/CalculatorReactApp

ඔබේම කැල්කියුලේටරය නිර්මාණය කිරීමෙන් ඔබ ඉගෙන ගනු ඇත:

• අංක සහ ගණිත මෙහෙයුම් සමඟ වැඩ කරන්න
• සිදුවීම් සවන්දෙන්නන් API සමඟ පුහුණු වන්න
• මූලද්රව්ය සකස් කරන්නේ කෙසේද, මෝස්තර තේරුම් ගන්න

ක්‍රෝලර් (සෙවුම් යන්ත්‍රය)

හැමෝම සෙවුම් යන්ත්‍රයක් භාවිතා කර ඇත, එබැවින් ඔබම නිර්මාණය නොකරන්නේ මන්ද? තොරතුරු සෙවීමට බඩගාන්නන් අවශ්‍ය වේ. සෑම කෙනෙකුම සෑම දිනකම ඒවා භාවිතා කරන අතර මෙම තාක්ෂණය සහ විශේෂඥයින් සඳහා ඇති ඉල්ලුම කාලයත් සමඟ පමණක් වර්ධනය වනු ඇත.

ගූගල් සෙවුම් යන්ත්‍රය

ඔබේම සෙවුම් යන්ත්‍රයක් නිර්මාණය කිරීමෙන් ඔබ ඉගෙන ගන්නා දේ:

• බඩගාන්නන් වැඩ කරන ආකාරය
• අඩවි සුචිගත කරන්නේ කෙසේද සහ ශ්‍රේණිගත කිරීම සහ කීර්තිය අනුව ඒවා ශ්‍රේණිගත කරන්නේ කෙසේද
• දත්ත සමුදාය තුළ සුචිගත අඩවි ගබඩා කරන්නේ කෙසේද සහ දත්ත සමුදාය සමඟ වැඩ කරන්නේ කෙසේද

සංගීත වාදකය (Spotify, Apple Music)

හැමෝම සංගීතයට සවන් දෙනවා - එය අපගේ ජීවිතයේ අනිවාර්ය අංගයක් පමණි. නවීන සංගීත ප්‍රවාහ වේදිකාවක මූලික යාන්ත්‍ර විද්‍යාව ක්‍රියා කරන ආකාරය වඩා හොඳින් අවබෝධ කර ගැනීමට සංගීත වාදකයක් නිර්මාණය කරමු.

Spotify

ඔබේම සංගීත ප්‍රවාහ වේදිකාවක් නිර්මාණය කිරීමෙන් ඔබ ඉගෙන ගන්නා දේ:

• API සමඟ වැඩ කරන්නේ කෙසේද. Spotify හෝ Apple Music වෙතින් API භාවිතා කරන්න
• මීළඟ/පෙර ධාවන පථයට ක්‍රීඩා කරන්නේ කෙසේද, විරාමයක් හෝ ආපස්සට යන්නේ කෙසේද
• පරිමාව වෙනස් කරන්නේ කෙසේද
• පරිශීලක මාර්ගගත කිරීම සහ බ්‍රව්සර් ඉතිහාසය කළමනාකරණය කරන්නේ කෙසේද

ප්‍රතික්‍රියා භාවිතයෙන් චිත්‍රපට සෙවුම් යෙදුම (කොකු සහිත)

ඔබට ආරම්භ කළ හැකි පළමු දෙය නම් React භාවිතයෙන් චිත්‍රපට සෙවුම් යෙදුමක් නිර්මාණය කිරීමයි. අවසාන යෙදුම කෙබඳු වනු ඇත්ද යන්න පිළිබඳ රූපයක් පහත දැක්වේ:

ඔබ මොනවද ඉගෙන ගන්නේ
මෙම යෙදුම ගොඩනැගීමෙන්, ඔබ සාපේක්ෂව නව Hooks API භාවිතා කිරීමෙන් ඔබේ ප්‍රතික්‍රියා කුසලතා වැඩි දියුණු කරයි. උදාහරණ ව්‍යාපෘතිය ප්‍රතික්‍රියා සංරචක, කොකු ගොඩක්, බාහිර API සහ ඇත්ත වශයෙන්ම සමහර CSS මෝස්තර භාවිතා කරයි.

තාක්ෂණික තොග සහ විශේෂාංග

• කොකු සමඟ ප්රතික්රියා කරන්න
• සාදන්න-ප්‍රතික්‍රියා කරන්න-යෙදුම
• JSX
• CSS

කිසිදු පංතියක් භාවිතා නොකර, මෙම ව්‍යාපෘති ඔබට ක්‍රියාකාරී ප්‍රතික්‍රියාවට පරිපූර්ණ පිවිසුම් ලක්ෂ්‍යයක් ලබා දෙන අතර 2020 දී ඔබට අනිවාර්යයෙන්ම උපකාර කරනු ඇත. ඔබට සොයා ගත හැක උදාහරණ ව්‍යාපෘතිය මෙතැනින්. උපදෙස් අනුගමනය කරන්න හෝ එය ඔබේම කර ගන්න.

Vue සමඟ චැට් යෙදුම

ඔබට කළ යුතු තවත් විශිෂ්ට ව්‍යාපෘතියක් නම් මගේ ප්‍රියතම ජාවාස්ක්‍රිප්ට් පුස්තකාලය භාවිතයෙන් කතාබස් යෙදුමක් නිර්මාණය කිරීමයි: VueJS. යෙදුම මේ වගේ දෙයක් පෙනෙනු ඇත:

ඔබ මොනවද ඉගෙන ගන්නේ
මෙම නිබන්ධනය තුළ, ඔබ මුල සිටම Vue යෙදුමක් සාදා ගන්නේ කෙසේදැයි ඉගෙන ගනු ඇත - සංරචක සෑදීම, තත්වය හැසිරවීම, මාර්ග නිර්මාණය කිරීම, තෙවන පාර්ශවීය සේවා වෙත සම්බන්ධ වීම සහ සත්‍යාපනය හැසිරවීම පවා.

තාක්ෂණික තොග සහ විශේෂාංග

• Vue
• vuex
• Vue රවුටරය
• Vue CLI
• පුෂර්
• CSS

මෙය Vue සමඟ ආරම්භ කිරීමට හෝ 2020 දී සංවර්ධනයට පිවිසීමට ඔබේ පවතින කුසලතා වැඩි දියුණු කිරීමට ඇත්තෙන්ම විශිෂ්ට ව්‍යාපෘතියකි. ඔබට සොයා ගත හැක නිබන්ධනය මෙතනින්.

Angular 8 සමඟ ලස්සන කාලගුණ යෙදුම

මෙම උදාහරණය ඔබට Angular 8 භාවිතයෙන් ලස්සන කාලගුණ යෙදුමක් නිර්මාණය කිරීමට උපකාරී වනු ඇත:

ඔබ මොනවද ඉගෙන ගන්නේ
මෙම ව්‍යාපෘතිය මුල සිටම යෙදුම් තැනීමේ වටිනා කුසලතා ඔබට උගන්වනු ඇත - සැලසුම් කිරීමේ සිට සංවර්ධනය දක්වා, යෙදවීමට සූදානම් යෙදුමක් දක්වා.

තාක්ෂණික තොග සහ විශේෂාංග

• කෝණික 8
• ෆයර්බෙස්
• සේවාදායක පැත්ත විදැහුම්කරණය
• Grid සහ Flexbox සමඟ CSS
• ජංගම හිතකාමී සහ අනුවර්තනය වීමේ හැකියාව
• අඳුරු මාදිලිය
• ලස්සන අතුරු මුහුණත

මෙම සර්ව සම්පූර්ණ ව්‍යාපෘතිය ගැන මම සැබවින්ම ප්‍රිය කරන්නේ ඔබ හුදකලා දේවල් අධ්‍යයනය නොකිරීමයි. ඒ වෙනුවට, ඔබ සැලසුම් කිරීමේ සිට අවසාන යෙදවීම දක්වා සම්පූර්ණ සංවර්ධන ක්‍රියාවලිය ඉගෙන ගනී.

Svelte භාවිතයෙන් කළ යුතු යෙදුම

Svelte යනු සංරචක-පාදක ප්‍රවේශයේ නව ළමයෙකු වැනිය - අවම වශයෙන් ප්‍රතික්‍රියා, Vue සහ Angular වලට සමාන වේ. මෙය 2020 සඳහා උණුසුම්ම නව නිෂ්පාදනවලින් එකකි.

කළ යුතු යෙදුම් අනිවාර්යයෙන්ම උණුසුම්ම මාතෘකාව නොවේ, නමුත් එය ඇත්ත වශයෙන්ම ඔබට ඔබේ Svelte කුසලතා ඔප්නැංවීමට උපකාරී වනු ඇත. එය මේ ආකාරයෙන් පෙනෙනු ඇත:

ඔබ මොනවද ඉගෙන ගන්නේ
මෙම නිබන්ධනය ආරම්භයේ සිට අවසානය දක්වා Svelte 3 භාවිතයෙන් යෙදුමක් නිර්මාණය කරන්නේ කෙසේදැයි පෙන්වයි. ඔබ සංරචක, හැඩගැන්වීම් සහ සිදුවීම් හසුරුවන්නන් භාවිතා කරනු ඇත

තාක්ෂණික තොග සහ විශේෂාංග

• ස්වෙල්ට් 3
• සංරචක
• CSS සමඟ හැඩගැන්වීම
• ES 6 වාක්‍ය ඛණ්ඩය

බොහෝ හොඳ Svelte ආරම්භක ව්‍යාපෘති නොමැත, එබැවින් මම සොයා ගතිමි මෙය ආරම්භ කිරීමට හොඳ විකල්පයකි.

Next.js භාවිතයෙන් ඊ-වාණිජ්‍යය යෙදුම

Next.js යනු පෙට්ටියෙන් පිටත සේවාදායක පැත්තේ විදැහුම්කරණයට සහාය වන ප්‍රතික්‍රියා යෙදුම් තැනීමේ වඩාත් ජනප්‍රිය රාමුවයි.

මෙම ව්‍යාපෘතිය මඟින් ඔබට මෙවැනි ඊ-වාණිජ්‍ය යෙදුමක් නිර්මාණය කරන්නේ කෙසේදැයි පෙන්වනු ඇත:

ඔබ මොනවද ඉගෙන ගන්නේ
මෙම ව්‍යාපෘතියේදී, ඔබ Next.js සමඟින් සංවර්ධනය කරන්නේ කෙසේදැයි ඉගෙන ගනු ඇත—නව පිටු සහ සංරචක නිර්මාණය කිරීම, දත්ත උකහා ගැනීම සහ විලාසය සහ ඊළඟ යෙදුමක් යෙදවීම.

තාක්ෂණික තොග සහ විශේෂාංග

• ඊළඟට
• සංරචක සහ පිටු
• දත්ත නියැදීම
• ශෛලීගත කිරීම
• ව්යාපෘති යෙදවීම
• SSR සහ SPA

අලුත් දෙයක් ඉගෙන ගැනීමට ඊ-වාණිජ්‍යය යෙදුමක් වැනි සැබෑ ලෝක ආදර්ශයක් තිබීම සැමවිටම විශිෂ්ටයි. ඔයාට පුළුවන් මෙහි නිබන්ධනය සොයා ගන්න.

Nuxt.js සමඟ පූර්ණ-පරිපූර්ණ බහුභාෂා බ්ලොගය

Nuxt.js යනු Vue සඳහා වන අතර, Next.js යනු ප්‍රතික්‍රියා සඳහා කුමක්ද: සේවාදායක පැත්තේ විදැහුම්කරණයේ සහ තනි පිටු යෙදුම්වල බලය ඒකාබද්ධ කිරීම සඳහා විශිෂ්ට රාමුවකි.
ඔබට නිර්මාණය කළ හැකි අවසාන යෙදුම මේ ආකාරයෙන් පෙනෙනු ඇත:

ඔබ මොනවද ඉගෙන ගන්නේ

මෙම නියැදි ව්‍යාපෘතිය තුළ, ඔබ Nuxt.js භාවිතයෙන් සම්පූර්ණ වෙබ් අඩවියක් නිර්මාණය කරන්නේ කෙසේදැයි ඉගෙන ගනු ඇත, මුලික සැකසුමේ සිට අවසාන යෙදවීම දක්වා.

එය Nuxt විසින් පිරිනමනු ලබන පිටු සහ සංරචක, සහ SCSS සමඟ හැඩගැන්වීම වැනි බොහෝ සිසිල් විශේෂාංගවලින් ප්‍රයෝජන ගනී.

තාක්ෂණික තොග සහ විශේෂාංග

• Nuxt.js
• සංරචක සහ පිටු
• Storyblock මොඩියුලය
• හග්ෆිෂ්
• රාජ්ය කළමනාකරණය සඳහා Vuex
• හැඩගැන්වීම සඳහා SCSS
• Nuxt midwares

මේක ඇත්තටම නියම ව්‍යාපෘතියක්, බොහෝ විශිෂ්ට Nuxt.js විශේෂාංග ඇතුළත් වේ. මම පුද්ගලිකව Nuxt සමඟ වැඩ කිරීමට ප්‍රිය කරමි, එබැවින් එය ඔබව විශිෂ්ට Vue සංවර්ධකයෙකු බවට පත් කරන බැවින් ඔබ එය උත්සාහ කර බලන්න.

Gatsby සමඟ බ්ලොග් කරන්න

Gatsby යනු React සහ GraphQL භාවිතා කරන විශිෂ්ට ස්ථිතික අඩවි උත්පාදකයකි. ව්‍යාපෘතියේ ප්‍රතිඵලය මෙයයි.

ඔබ මොනවද ඉගෙන ගන්නේ

මෙම නිබන්ධනයේදී, ඔබ React සහ GraphQL භාවිතයෙන් ඔබේම ලිපි ලිවීමට භාවිතා කරන බ්ලොග් එකක් සෑදීමට Gatsby භාවිතා කරන්නේ කෙසේදැයි ඉගෙන ගනු ඇත.

තාක්ෂණික තොග සහ විශේෂාංග

• ගැට්ස්බි
• React
• GraphQL
• ප්ලගීන සහ තේමා
• MDX/Markdown
• Bootstrap CSS
• රටා

ඔබට කවදා හෝ බ්ලොග් අඩවියක් ආරම්භ කිරීමට අවශ්‍ය නම්, මෙය කදිම නිදසුනකි React සහ GraphQL භාවිතයෙන් එය සාදා ගන්නේ කෙසේද යන්න පිළිබඳව.

මම WordPress නරක තේරීමක් යැයි නොකියමි, නමුත් Gatsby සමඟින් ඔබට React භාවිතයෙන් ඉහළ කාර්යසාධනයක් සහිත වෙබ් අඩවි ගොඩනගා ගත හැකිය - එය විශ්මයජනක සංයෝජනයකි.

Gridsome සමඟ බ්ලොග් කරන්න

Vue සඳහා Gridsome... හරි, අපි දැනටමත් මෙය Next/Nuxt සමඟ ඇත.
නමුත් Gridsome සහ Gatsby සම්බන්ධයෙන්ද එයම සත්‍ය වේ. දෙකම ඔවුන්ගේ දත්ත ස්ථරය ලෙස GraphQL භාවිතා කරයි, නමුත් Gridsome VueJS භාවිතා කරයි. මෙය විශිෂ්ට ස්ථිතික අඩවි උත්පාදකයක් වන අතර එය ඔබට විශිෂ්ට බ්ලොග් නිර්මාණය කිරීමට උපකාරී වනු ඇත:

ඔබ මොනවද ඉගෙන ගන්නේ

Gridsome, GraphQL සහ Markdown සමඟින් ආරම්භ කිරීම සඳහා සරල බ්ලොගයක් නිර්මාණය කරන ආකාරය මෙම ව්‍යාපෘතිය මඟින් ඔබට කියා දෙනු ඇත. Netlify හරහා යෙදුමක් යෙදවිය යුතු ආකාරය ද එය ආවරණය කරයි.

තාක්ෂණික තොග සහ විශේෂාංග

• ග්රිඩ්සම්
• Vue
• GraphQL
• Markdown
• නෙට්ලිෆයි

මෙය නිසැකවම වඩාත් විස්තීර්ණ නිබන්ධනය නොවේ, නමුත් එය Gridsome හි මූලික සංකල්ප ආවරණය කරයි සලකුණු කිරීම හොඳ ආරම්භක ලක්ෂ්‍යයක් විය හැකිය.

Quasar භාවිතා කරන SoundCloud වැනි ශ්‍රව්‍ය වාදකය

Quasar යනු ජංගම යෙදුම් නිර්මාණය කිරීමට භාවිතා කළ හැකි තවත් Vue රාමුවකි. මෙම ව්‍යාපෘතියේදී ඔබ ඕඩියෝ ප්ලේයර් යෙදුමක් සාදනු ඇත, උදාහරණයක් ලෙස:

ඔබ මොනවද ඉගෙන ගන්නේ

අනෙකුත් ව්‍යාපෘති ප්‍රධාන වශයෙන් වෙබ් යෙදුම් කෙරෙහි අවධානය යොමු කරන අතර, මෙය Vue සහ Quasar රාමුව භාවිතයෙන් ජංගම යෙදුමක් නිර්මාණය කරන්නේ කෙසේදැයි පෙන්වයි.
ඔබ දැනටමත් Android Studio/Xcode වින්‍යාස කර ඇති Cordova ධාවනය කර තිබිය යුතුය. එසේ නොවේ නම්, අත්පොතෙහි Quasar වෙබ් අඩවියට සබැඳියක් ඇත, එහිදී ඔවුන් ඔබට සියල්ල සකසන්නේ කෙසේදැයි පෙන්වයි.

තාක්ෂණික තොග සහ විශේෂාංග

• ක්වාසාර්
• Vue
• Cordova
• WaveSurfer
• UI සංරචක

කුඩා ව්යාපෘතිය, ජංගම යෙදුම් නිර්මාණය කිරීම සඳහා ක්වාසාර්ගේ හැකියාවන් ප්‍රදර්ශනය කිරීම.

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

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

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

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

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

ස්ථම්භ ප්රස්ථාරය

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

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

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

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

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

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

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

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

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

සෙවිය හැකි GitHub ගබඩා

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

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

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

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

Reddit විලාසිතාවේ කතාබස්

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

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

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

තීරු විලාසය සංචාලනය

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

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

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

පැක්මන්

Pacman හි ඔබේම අනුවාදයක් සාදන්න. ක්‍රීඩා සංවර්ධනය වන ආකාරය පිළිබඳ අදහසක් ලබා ගැනීමට සහ මූලික කරුණු තේරුම් ගැනීමට මෙය හොඳ ක්‍රමයකි. JavaScript රාමුවක්, ප්‍රතික්‍රියා හෝ Vue භාවිතා කරන්න.

ඔබ ඉගෙන ගනු ඇත:

• මූලද්රව්ය චලනය වන ආකාරය
• කුමන යතුරු එබිය යුතුද යන්න තීරණය කරන්නේ කෙසේද?
• ගැටීමේ මොහොත තීරණය කරන්නේ කෙසේද?
• ඔබට තවත් ඉදිරියට ගොස් අවතාර චලන පාලන එකතු කළ හැක

මෙම ව්යාපෘතියේ උදාහරණයක් ඔබට සොයාගත හැකිය ගබඩාවේ GitHub

පරිශීලක කළමනාකරණය

ව්යාපෘති ගබඩාවේ GitHub

පරිශීලක පරිපාලනය සඳහා CRUD ආකාරයේ යෙදුමක් නිර්මාණය කිරීම සංවර්ධනයේ මූලික කරුණු ඔබට උගන්වනු ඇත. මෙය නව සංවර්ධකයින් සඳහා විශේෂයෙන් ප්රයෝජනවත් වේ.

ඔබ ඉගෙන ගනු ඇත:

• මාර්ගගත කිරීම යනු කුමක්ද?
• දත්ත ඇතුළත් කිරීමේ පෝරම හසුරුවන්නේ කෙසේද සහ පරිශීලකයා ඇතුළත් කර ඇති දේ පරීක්ෂා කරන්න
• දත්ත සමුදාය සමඟ වැඩ කරන්නේ කෙසේද - ක්රියා නිර්මාණය කිරීම, කියවීම, යාවත්කාලීන කිරීම සහ මකා දැමීම

ඔබගේ ස්ථානයේ කාලගුණය පරීක්ෂා කිරීම

ව්යාපෘති ගබඩාවේ GitHub

ඔබට යෙදුම් නිර්මාණය කිරීමට අවශ්‍ය නම්, කාලගුණ යෙදුමකින් ආරම්භ කරන්න. මෙම ව්‍යාපෘතිය Swift භාවිතයෙන් නිම කළ හැක.

යෙදුමක් ගොඩනැගීමේ අත්දැකීම් ලබා ගැනීමට අමතරව, ඔබ ඉගෙන ගනු ඇත:

• API සමඟ වැඩ කරන්නේ කෙසේද
• භූ ස්ථානගත කිරීම භාවිතා කරන්නේ කෙසේද
• පෙළ ආදානය එක් කිරීමෙන් ඔබේ යෙදුම වඩාත් ගතික කරන්න. එහි දී, පරිශීලකයින්ට නිශ්චිත ස්ථානයක කාලගුණය පරීක්ෂා කිරීම සඳහා ඔවුන්ගේ ස්ථානය ඇතුළු කිරීමට හැකි වනු ඇත.

ඔබට API එකක් අවශ්‍ය වේ. කාලගුණ දත්ත ලබා ගැනීමට, OpenWeather API භාවිතා කරන්න. OpenWeather API පිළිබඳ වැඩි විස්තර මෙහි.

කතාබස් කවුළුව

මගේ කතාබස් කවුළුව ක්‍රියාත්මකයි, බ්‍රවුසර ටැබ් දෙකකින් විවෘත කරන්න

කතාබස් කවුළුවක් නිර්මාණය කිරීම සොකට් සමඟ ආරම්භ කිරීමට හොඳම ක්රමයයි. තාක්ෂණික තොගයේ තේරීම විශාලයි. උදාහරණයක් ලෙස Node.js පරිපූර්ණයි.

සොකට් ක්‍රියා කරන ආකාරය සහ ඒවා ක්‍රියාත්මක කරන්නේ කෙසේදැයි ඔබ ඉගෙන ගනු ඇත. මෙම ව්යාපෘතියේ ප්රධාන වාසිය මෙයයි.

ඔබ සොකට් සමඟ වැඩ කිරීමට කැමති Laravel සංවර්ධකයෙක් නම්, මගේ කියවන්න ලිපිය

ගිට්ලැබ් සීඅයි

ප්රභවය

ඔබ අඛණ්ඩ ඒකාබද්ධතාවයට (CI) අලුත් නම්, GitLab CI සමඟ සෙල්ලම් කරන්න. පරිසරයන් කිහිපයක් සකසා පරීක්ෂණ කිහිපයක් ධාවනය කිරීමට උත්සාහ කරන්න. එය එතරම් අපහසු ව්‍යාපෘතියක් නොවේ, නමුත් ඔබ එයින් බොහෝ දේ ඉගෙන ගනු ඇතැයි මට විශ්වාසයි. බොහෝ සංවර්ධන කණ්ඩායම් දැන් CI භාවිතා කරයි. එය භාවිතා කරන ආකාරය දැන ගැනීම ප්රයෝජනවත් වේ.

ඔබ ඉගෙන ගනු ඇත:

• GitLab CI යනු කුමක්ද?
• මානකරන ආකාරය .gitlab-ci.ymlඑය GitLab පරිශීලකයාට කළ යුතු දේ කියයි
• වෙනත් පරිසරයන් වෙත යෙදවිය යුතු ආකාරය

වෙබ් අඩවි විශ්ලේෂකය

වෙබ් අඩවිවල අර්ථ ශාස්ත්‍රය විශ්ලේෂණය කර ඒවායේ ශ්‍රේණිගත කිරීම් නිර්මාණය කරන scraper එකක් සාදන්න. උදාහරණයක් ලෙස, ඔබට පින්තූරවල අස්ථානගත වූ alt ටැග් පරීක්ෂා කළ හැක. නැතහොත් පිටුවෙහි SEO මෙටා ටැග් තිබේදැයි පරීක්ෂා කරන්න. පරිශීලක අතුරුමුහුණතක් නොමැතිව scraper නිර්මාණය කළ හැකිය.

ඔබ ඉගෙන ගනු ඇත:

• Scraper වැඩ කරන්නේ කෙසේද?
• DOM තේරීම් කාරක සාදා ගන්නේ කෙසේද
• ඇල්ගොරිතමයක් ලියන ආකාරය
• ඔබට එතැනින් නතර වීමට අවශ්‍ය නැතිනම්, පරිශීලක අතුරුමුහුණතක් සාදන්න. ඔබ පරීක්ෂා කරන සෑම වෙබ් අඩවියකම ඔබට වාර්තාවක් නිර්මාණය කළ හැකිය.

සමාජ ජාල වල හැඟීම් හඳුනා ගැනීම

ප්රභවය

සමාජ මාධ්‍යවල හැඟීම් හඳුනාගැනීම යන්ත්‍ර ඉගෙනීමට හඳුන්වා දීමට හොඳ ක්‍රමයකි.

ඔබට එක් සමාජ ජාලයක් විශ්ලේෂණය කිරීමෙන් ආරම්භ කළ හැකිය. හැමෝම සාමාන්‍යයෙන් පටන් ගන්නේ Twitter වලින්.

ඔබට දැනටමත් යන්ත්‍ර ඉගෙනීම පිළිබඳ අත්දැකීම් තිබේ නම්, විවිධ සමාජ ජාල වලින් දත්ත එකතු කර ඒවා ඒකාබද්ධ කිරීමට උත්සාහ කරන්න.

ඔබ ඉගෙන ගනු ඇත:

• යන්ත්‍ර ඉගෙනීම යනු කුමක්ද?

ට්‍රෙලෝ ක්ලෝනය

Indrek Lasn වෙතින් ට්‍රෙලෝ ක්ලෝනය.

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

• ඉල්ලීම් සැකසීමේ මාර්ග සංවිධානය කිරීම (මාර්ගගත කිරීම).
• ඇදගෙන යන්න.
• නව වස්තූන් නිර්මාණය කරන්නේ කෙසේද (පුවරු, ලැයිස්තු, කාඩ්පත්).
• ආදාන දත්ත සැකසීම සහ පරීක්ෂා කිරීම.
• සේවාලාභියාගේ පැත්තෙන්: දේශීය ගබඩාව භාවිතා කරන්නේ කෙසේද, දේශීය ආචයනය වෙත දත්ත ඉතිරි කරන්නේ කෙසේද, දේශීය ගබඩාවෙන් දත්ත කියවන්නේ කෙසේද.
• සේවාදායකයේ පැත්තෙන්: දත්ත සමුදායන් භාවිතා කරන්නේ කෙසේද, දත්ත ගබඩාවේ දත්ත ගබඩා කරන්නේ කෙසේද, දත්ත සමුදායෙන් දත්ත කියවන්නේ කෙසේද.

මෙන්න ගබඩාවක උදාහරණයක්, React+Redux වලින් සාදා ඇත.

පරිපාලක මණ්ඩලය

Github ගබඩාව.

සරල CRUD යෙදුමක්, මූලික කරුණු ඉගෙන ගැනීම සඳහා වඩාත් සුදුසුය. අපි ඉගෙන ගනිමු:

• පරිශීලකයින් සාදන්න, පරිශීලකයින් කළමනාකරණය කරන්න.
• දත්ත සමුදාය සමඟ අන්තර් ක්‍රියා කරන්න - පරිශීලකයින් සාදන්න, කියවන්න, සංස්කරණය කරන්න, මකන්න.
• ආදානය තහවුරු කිරීම සහ පෝරම සමඟ වැඩ කිරීම.

Cryptocurrency tracker (දේශීය ජංගම යෙදුම)

Github ගබඩාව.

ඕනෑම දෙයක්: Swift, Objective-C, React Native, Java, Kotlin.

අපි අධ්යයනය කරමු:

• දේශීය යෙදුම් ක්‍රියා කරන ආකාරය.
• API වෙතින් දත්ත ලබා ගන්නේ කෙසේද.
• ස්වදේශීය පිටු පිරිසැලසුම් ක්‍රියා කරන ආකාරය.
• ජංගම සිමියුලේටර් සමඟ වැඩ කරන්නේ කෙසේද.

මෙම API උත්සාහ කරන්න. ඔබ වඩා හොඳ දෙයක් සොයා ගන්නේ නම්, අදහස් දැක්වීමේදී ලියන්න.

ඔබ උනන්දුවක් දක්වන්නේ නම්, මෙන්න එයයි මෙන්න නිබන්ධනයක්.

මුල සිටම ඔබේම webpack config එකක් සකසන්න

තාක්ෂණික වශයෙන්, මෙය යෙදුමක් නොවේ, නමුත් webpack ඇතුළත සිට ක්‍රියා කරන ආකාරය තේරුම් ගැනීම ඉතා ප්‍රයෝජනවත් කාර්යයකි. දැන් එය "කළු පෙට්ටියක්" නොව, තේරුම්ගත හැකි මෙවලමක් වනු ඇත.

අවශ්‍යතා:

• es7 සිට es5 දක්වා සම්පාදනය කරන්න (මූලික).
• jsx සිට js — or - .vue සිට .js දක්වා සම්පාදනය කරන්න (ඔබට ලෝඩර් ඉගෙන ගැනීමට සිදුවේ)
• webpack dev සේවාදායකය සහ උණුසුම් මොඩියුල නැවත පූරණය සකසන්න. (vue-cli සහ create-react-app දෙකම භාවිතා කරයි)
• Heroku භාවිතා කරන්න, now.sh හෝ Github, webpack ව්‍යාපෘති යෙදවීමට ඉගෙන ගන්න.
• css - scss, අඩු, ස්ටයිලස් සම්පාදනය කිරීමට ඔබේ ප්‍රියතම ප්‍රොසෙසරය සකසන්න.
• Webpack සමඟ පින්තූර සහ svgs භාවිතා කරන ආකාරය ඉගෙන ගන්න.

මෙය සම්පූර්ණ ආරම්භකයින් සඳහා පුදුමාකාර සම්පතකි.

හැකර් නිවුස් ක්ලෝනය

සෑම ජෙඩියෙකුටම තමාගේම හැකර් නිවුස් සෑදීම අවශ්‍ය වේ.

මඟදී ඔබ ඉගෙන ගන්නා දේ:

• Hackernews API සමඟ අන්තර් ක්‍රියා කරන්නේ කෙසේද.
• තනි පිටුවක යෙදුමක් සාදා ගන්නේ කෙසේද.
• අදහස් බැලීම, තනි අදහස්, පැතිකඩ වැනි විශේෂාංග ක්‍රියාත්මක කරන්නේ කෙසේද.
• ඉල්ලීම් සැකසීමේ මාර්ග සංවිධානය කිරීම (මාර්ගගත කිරීම).

තුඩුෂෙච්කා

TodoMVC.

බරපතල ලෙස? තුදුෂ්කා? ඔවුන් දහස් ගණනක් ඇත. නමුත් මාව විශ්වාස කරන්න, මෙම ජනප්රියත්වය සඳහා හේතුවක් තිබේ.
Tudu යෙදුම ඔබට මූලික කරුණු අවබෝධ කර ගැනීමට හොඳ ක්‍රමයකි. එක් යෙදුමක් වැනිලා ජාවාස්ක්‍රිප්ට් වලින් සහ එකක් ඔබේ ප්‍රියතම රාමුවෙන් ලිවීමට උත්සාහ කරන්න.

ඉගෙන ගන්න:

• නව කාර්යයන් සාදන්න.
• ක්ෂේත්ර පුරවා ඇත්දැයි පරීක්ෂා කරන්න.
• පෙරහන් කාර්යයන් (සම්පූර්ණ, සක්‍රිය, සියල්ල). භාවිත filter и reduce.
• Javascript හි මූලික කරුණු තේරුම් ගන්න.

වර්ග කළ හැකි ඇදගෙන යාමේ ලැයිස්තුව

Github ගබඩාව.

තේරුම් ගැනීමට ඉතා උපකාරී වේ drag and drop api.

අපි ඉගෙන ගනිමු:

• API ඇද දමන්න
• පොහොසත් UI සාදන්න

Messenger clone (දේශීය යෙදුම)

වෙබ් යෙදුම් සහ ස්වදේශීය යෙදුම් යන දෙකම ක්‍රියා කරන ආකාරය ඔබට වැටහෙනු ඇත, එමඟින් ඔබව අළු ස්කන්ධයෙන් වෙන් කරනු ඇත.

අපි අධ්යයනය කරන දේ:

• වෙබ් සොකට් (ක්ෂණික පණිවිඩ)
• දේශීය යෙදුම් ක්‍රියා කරන ආකාරය.
• ස්වදේශීය යෙදුම්වල සැකිලි ක්‍රියා කරන ආකාරය.
• දේශීය යෙදුම්වල ඉල්ලීම් සැකසීමේ මාර්ග සංවිධානය කිරීම.

පෙළ සංස්කාරකය

පෙළ සංස්කාරකයක අරමුණ වනුයේ ඔවුන්ගේ හැඩතල ගැන්වීම වලංගු HTML සලකුණු බවට පරිවර්තනය කිරීමට උත්සාහ කරන පරිශීලකයන්ගේ උත්සාහය අඩු කිරීමයි. හොඳ පෙළ සංස්කාරකයක් පරිශීලකයින්ට විවිධ ආකාරවලින් පෙළ සංයුති කිරීමට ඉඩ දෙයි.

යම් අවස්ථාවක දී, සෑම කෙනෙකුම පෙළ සංස්කාරකයක් භාවිතා කර ඇත. ඉතින් ඇයි නැත්තේ එය ඔබම නිර්මාණය කරන්න?

Reddit ක්ලෝනය

Reddit සමාජ ප්‍රවෘත්ති එකතුවක්, වෙබ් අන්තර්ගත ශ්‍රේණිගත කිරීම් සහ සාකච්ඡා අඩවියකි.

Reddit මගේ කාලයෙන් වැඩි කාලයක් ගත කරයි, නමුත් මම දිගටම එය මත රැඳී සිටිමි. Reddit ක්ලෝනයක් නිර්මාණය කිරීම ක්‍රමලේඛනය ඉගෙන ගැනීමට ඵලදායී ක්‍රමයකි (එකම අවස්ථාවේදීම Reddit බ්‍රවුස් කරන අතරතුර).

Reddit ඔබට ඉතා පොහොසත් සපයයි API. කිසිම අංගයක් අත් නොහරින්න හෝ අහම්බෙන් දේවල් කරන්න එපා. සේවාලාභීන් සහ ගනුදෙනුකරුවන් සිටින සැබෑ ලෝකයේ, ඔබට අහම්බෙන් වැඩ කළ නොහැක, නැතහොත් ඔබට ඉක්මනින් ඔබේ රැකියාව අහිමි වනු ඇත.

කාර්යය දුර්වල ලෙස සිදු කරන බව ස්මාර්ට් සේවාදායකයින් වහාම වටහා ගන්නා අතර වෙනත් කෙනෙකු සොයා ගනු ඇත.

Reddit API

විවෘත මූලාශ්‍ර NPM පැකේජයක් ප්‍රකාශයට පත් කිරීම

ඔබ ජාවාස්ක්‍රිප්ට් කේතය ලියන්නේ නම්, ඔබ පැකේජ කළමණාකරුවෙකු භාවිතා කිරීමට ඉඩ ඇත. වෙනත් පුද්ගලයින් ලියා ප්‍රකාශයට පත් කර ඇති පවතින කේතය නැවත භාවිතා කිරීමට පැකේජ කළමනාකරු ඔබට ඉඩ සලසයි.

පැකේජයක සම්පූර්ණ සංවර්ධන චක්‍රය අවබෝධ කර ගැනීම ඉතා හොඳ අත්දැකීමක් ලබා දෙනු ඇත. කේතය ප්‍රකාශනය කිරීමේදී ඔබ දැනගත යුතු බොහෝ දේ ඇත. ඔබ ආරක්ෂාව, අර්ථකථන අනුවාදය, පරිමාණය, නම් කිරීමේ සම්මුතීන් සහ නඩත්තු කිරීම ගැන සිතා බැලිය යුතුය.

පැකේජය ඕනෑම දෙයක් විය හැකිය. ඔබට අදහසක් නොමැති නම්, ඔබේම Lodash නිර්මාණය කර එය පළ කරන්න.

Lodash: lodash.com

ඔබ මාර්ගගතව කළ දෙයක් තිබීම ඔබව අන් අයට වඩා 10%කට වඩා ඉහළින් තබයි. මෙන්න ප්රයෝජනවත් සම්පත් කිහිපයක් විවෘත මූලාශ්‍ර සහ පැකේජ ගැන.

freeCodeCamp විෂය මාලාව

FCC විෂය මාලාව

freeCodecamp බොහෝ දේ එකතු කර ඇත විස්තීර්ණ වැඩසටහන් පාඨමාලාව.

freeCodeCamp යනු ලාභ නොලබන සංවිධානයකි. එය අන්තර්ක්‍රියාකාරී වෙබ් පාදක ඉගෙනුම් වේදිකාවක්, සබැඳි ප්‍රජා සංසදයක්, කතාබස් කාමර, මධ්‍යම ප්‍රකාශන සහ සෑම කෙනෙකුටම ඉගෙනීමේ වෙබ් සංවර්ධනය ප්‍රවේශ කිරීමට අදහස් කරන ප්‍රාදේශීය සංවිධාන වලින් සමන්විත වේ.

ඔබ සම්පූර්ණ පාඨමාලාව සම්පූර්ණ කිරීමට සමත් වන්නේ නම්, ඔබ ඔබේ පළමු රැකියාවට වඩා සුදුසුකම් ලබනු ඇත.

මුල සිට HTTP සේවාදායකයක් සාදන්න

HTTP ප්‍රොටෝකෝලය යනු අන්තර්ජාලයේ අන්තර්ගතය ගමන් කරන ප්‍රධාන ප්‍රොටෝකෝලයකි. HTTP සේවාදායකයන් HTML, CSS සහ JS වැනි ස්ථිතික අන්තර්ගතයන් සැපයීමට භාවිතා කරයි.

මුල සිටම HTTP ප්‍රොටෝකෝලය ක්‍රියාත්මක කිරීමට හැකිවීම දේවල් අන්තර්ක්‍රියා කරන ආකාරය පිළිබඳ ඔබේ දැනුම පුළුල් කරයි.

උදාහරණයක් ලෙස, ඔබ NodeJs භාවිතා කරන්නේ නම්, Express HTTP සේවාදායකයක් සපයන බව ඔබ දන්නවා.

යොමුව සඳහා, ඔබට හැකිදැයි බලන්න:

• කිසිදු පුස්තකාලයක් භාවිතා නොකර සේවාදායකයක් සකසන්න
• සේවාදායකය HTML, CSS සහ JS අන්තර්ගතයට සේවය කළ යුතුය.
• මුල සිටම රවුටරයක් ​​ක්රියාත්මක කිරීම
• වෙනස්කම් නිරීක්ෂණය කර සේවාදායකය යාවත්කාලීන කරන්න

ඇයි දැයි නොදන්නේ නම්, භාවිතා කරන්න යන්න සහ HTTP සේවාදායකයක් සෑදීමට උත්සාහ කරන්න කැඩී මුල සිට.

සටහන් සඳහා ඩෙස්ක්ටොප් යෙදුම

අපි හැමෝම සටහන් ගන්නවා නේද?

අපි සටහන් යෙදුමක් නිර්මාණය කරමු. යෙදුමට සටහන් සුරැකීමට සහ ඒවා දත්ත සමුදාය සමඟ සමමුහුර්ත කිරීමට අවශ්‍ය වේ. ඉලෙක්ට්‍රෝන, ස්විෆ්ට් හෝ ඔබ කැමති ඕනෑම දෙයක් සහ ඔබේ පද්ධතියට ක්‍රියා කරන දේ භාවිතයෙන් ස්වදේශීය යෙදුමක් සාදන්න.

මෙය පළමු අභියෝගය (පෙළ සංස්කාරකය) සමඟ ඒකාබද්ධ කිරීමට නිදහස් වන්න.

ප්‍රසාද දීමනාවක් ලෙස, ඔබේ ඩෙස්ක්ටොප් අනුවාදය වෙබ් අනුවාදය සමඟ සමමුහුර්ත කිරීමට උත්සාහ කරන්න.

පොඩ්කාස්ට් (අවතල ක්ලෝනය)

පොඩ්කාස්ට් වලට සවන් නොදෙන්නේ කවුද?

පහත ක්‍රියාකාරීත්වය සහිත වෙබ් යෙදුමක් සාදන්න:

• ගිණුමක් තනන්න
• පොඩ්කාස්ට් සොයන්න
• පොඩ්කාස්ට් අගයන්න සහ දායක වන්න
• තත්පර 30 ක් සඳහා නවත්වන්න සහ සෙල්ලම් කරන්න, වේගය වෙනස් කරන්න, ඉදිරියට සහ පසුගාමී කාර්යයන්.

ආරම්භක ලක්ෂ්‍යයක් ලෙස iTunes API භාවිතා කිරීමට උත්සාහ කරන්න. ඔබ වෙනත් සම්පත් දන්නේ නම්, කරුණාකර අදහස් දැක්වීම්වල පළ කරන්න.

affiliate.itunes.apple.com/resources/documentation/itunes-store-web-service-search-api

තිර ග්රහණය

ආයුබෝවන්! මම දැන් මගේ තිරය රූගත කරනවා!

ඔබේ තිරය ග්‍රහණය කර ගැනීමට සහ පසුරුපය මෙසේ සුරැකීමට ඉඩ දෙන ඩෙස්ක්ටොප් එකක් හෝ වෙබ් යෙදුමක් සාදන්න .gif

මෙහි සමහර උපදෙස්මෙය සාක්ෂාත් කර ගන්නේ කෙසේද.

මුලාශ්‍ර

• සංවර්ධකයා සඳහා තවත් නිර්භීත පුහුණු ව්‍යාපෘති 5ක් (Layer, Squoosh, Calculator, Website Crawler, Music Player)
• ඔබේ Front-End කුසලතා ඔප්නැංවීමට ව්‍යාපෘති 9ක්
• Front-End සංවර්ධකයෙකු සඳහා කාර්යයන් හයක්
• සංවර්ධකයෙකු සඳහා විනෝද පුහුණුව
• අධ්‍යාපනික ව්‍යාපෘති 8ක්
• පුහුණු වීමට තවත් ව්‍යාපෘති ලැයිස්තුවක්

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