1. Клон Notion
Приложение Notion полюбилось многим, оно позволяет оптимизировать рабочий процесс, работать с документами, планировать задачи, синхронизировать данные между устройствами.
Чему вы научитесь, создавая клон Notion:
HTML Drag and drop API . Пользователь может «схватить мышкой» draggable элемент и поместить его в droppable зону.- Как синхронизировать в режиме реального времени данные между компьютером и смартфоном.
- Мы позволяем пользователям создавать, читать, обновлять и удалять записи, тем самым мы тренируем CRUD-навыки.
ලිපිය පරිවර්තනය කරන ලද්දේ EDISON මෘදුකාංගයේ සහය ඇතිවයразрабатывает приложения и сайты , මෙන්මආරම්භක සඳහා ආයෝජනය කරයි .
2. Клон Repl.it
Repl.it -это инструмент для совместного редактирования кода в реальном времени. Можно выбрать несколько языков: JavaScript, Python, Go и выполнять код прямо в браузере. Очень полезно для быстрых демонстраций и код-интервью.
Чему вы научитесь, создавая клон Repl.it:
- Как запускать и выполнять код (server-side) в браузере (client-side).
- Считывать входные данные (исходный код) и выводить на экран результат выполнения.
- Как создавать файлы и папки в вебе и сохранять результаты.
- Как подсвечивать синтаксис кода.
3. Клон Google Photos
Google Photos это сервис для хранения и обмена фоток.
Любое современное приложение по работе с фотографиями умеет выполнять базовые функции: загружать, обрезать и пр. Люди хотят создавать свои аватарки и делиться фотками котиков, поэтому надо уметь работать с изображениями.
Чему вы научитесь, создавая клон Google Photos:
- Как создавать адаптивные изображения на телефонах, планшетах, ноутбуках и даже на гигантских экранах телевизоров.
- Как обрабатывать загрузку изображений, особенно больших изображений (>1МБ) и массовых загрузок.
- Обработка файлов изображений, обрезка и изменение размера фотографий для миниатюр или при открытии галереи.
- පාරිතෝෂිකය: как хранить изображения в облаке или локальной базе данных.
4. Клон Gifsky
Чему вы научитесь, создавая клон Gifski:
- Как конвертировать видео файлы (.mp4 в .gif).
- Как использовать API Drag and Drop HTML.
- Как работают оптимизация и обработка изображений.
සටහන:
5. Мониторинг курсов криптовалют
React Native cryptocurrency tracker
Чему вы научитесь, создавая трекер курса валют:
- Как работать с API и получать данные удаленно из API.
- Как отобразить данные в виде списка.
- පාරිතෝෂිකය: Если вам интересно, я недавно написал
туториал по созданию трекера цен на криптовалюту с React Native.
සටහන: මෙහි
Подборка проектов из предыдущих публикаций.
වන ස්ථරය තුළ දත්ත
ස්තරය යනු බෙදාගත් "පුවරුව" මත සෑම කෙනෙකුටම පික්සලයක් ඇඳිය හැකි ප්රජාවකි. මුල් අදහස Reddit මත උපත ලැබීය. r/Layer ප්රජාව යනු හවුල් නිර්මාණශීලීත්වය සඳහා රූපකයකි, සෑම කෙනෙකුටම නිර්මාණකරුවෙකු විය හැකි අතර පොදු අරමුණකට දායක විය හැක.
ඔබේම ස්ථර ව්යාපෘතියක් නිර්මාණය කිරීමේදී ඔබ ඉගෙන ගන්නා දේ:
- ජාවාස්ක්රිප්ට් කැන්වස් ක්රියා කරන ආකාරය කැන්වසයක් ක්රියාත්මක කරන ආකාරය දැන ගැනීම බොහෝ යෙදුම්වල තීරණාත්මක කුසලතාවයකි.
- පරිශීලක අවසර සම්බන්ධීකරණය කරන්නේ කෙසේද. සෑම පරිශීලකයෙකුටම ලොග් වීමකින් තොරව සෑම විනාඩි 15 කට වරක් එක් පික්සලයක් ඇඳිය හැකිය.
- කුකී සැසි සාදන්න.
ස්කොෂ්
Squoosh යනු බොහෝ උසස් විකල්ප සහිත රූප සම්පීඩන යෙදුමකි.
GIF 20 MB
Squoosh හි ඔබේම අනුවාදයක් නිර්මාණය කිරීමෙන් ඔබ ඉගෙන ගනු ඇත:
- පින්තූර ප්රමාණය සමඟ වැඩ කරන්නේ කෙසේද
- Drag'n'Drop API හි මූලික කරුණු ඉගෙන ගන්න
- API සහ සිදුවීම් සවන්දෙන්නන් ක්රියා කරන ආකාරය තේරුම් ගන්න
- ගොනු උඩුගත කිරීම සහ අපනයනය කරන ආකාරය
සටහන: රූප සම්පීඩකය දේශීය වේ. සේවාදායකයට අමතර දත්ත යැවීම අවශ්ය නොවේ. ඔබට සම්පීඩකය නිවසේ තිබිය හැකිය, නැතහොත් ඔබට එය සේවාදායකයක භාවිතා කළ හැකිය, ඔබේ අභිමතය පරිදි.
කැල්කියුලේටරය
ඉදිරියට එන්න? බරපතල ලෙස? කැල්කියුලේටරය? ඔව්, හරියටම, ගණක යන්ත්රයක්. ගණිත ක්රියා වල මූලික කරුණු සහ ඒවා එකට ක්රියා කරන ආකාරය අවබෝධ කර ගැනීම ඔබගේ යෙදුම් සරල කිරීම සඳහා ඉතා වැදගත් කුසලතාවකි. ඉක්මනින් හෝ පසුව ඔබට අංක සමඟ කටයුතු කිරීමට සිදුවනු ඇති අතර ඉක්මනින් වඩා හොඳය.
ඔබේම කැල්කියුලේටරය නිර්මාණය කිරීමෙන් ඔබ ඉගෙන ගනු ඇත:
- අංක සහ ගණිත මෙහෙයුම් සමඟ වැඩ කරන්න
- සිදුවීම් සවන්දෙන්නන් 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
Gatsby සමඟ බ්ලොග් කරන්න
Gatsby යනු React සහ GraphQL භාවිතා කරන විශිෂ්ට ස්ථිතික අඩවි උත්පාදකයකි. ව්යාපෘතියේ ප්රතිඵලය මෙයයි.
ඔබ මොනවද ඉගෙන ගන්නේ
මෙම නිබන්ධනයේදී, ඔබ React සහ GraphQL භාවිතයෙන් ඔබේම ලිපි ලිවීමට භාවිතා කරන බ්ලොග් එකක් සෑදීමට Gatsby භාවිතා කරන්නේ කෙසේදැයි ඉගෙන ගනු ඇත.
තාක්ෂණික තොග සහ විශේෂාංග
- ගැට්ස්බි
- React
- GraphQL
- ප්ලගීන සහ තේමා
- MDX/Markdown
- Bootstrap CSS
- රටා
ඔබට කවදා හෝ බ්ලොග් අඩවියක් ආරම්භ කිරීමට අවශ්ය නම්,
මම 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
සහ එය සමඟ මූලද්රව්ය අඳින්නේ කෙසේද
Анимация сердечка Twitter
නැවතත් 2016 දී, Twitter විසින් සිය ට්වීට් සඳහා මෙම විශ්මයජනක සජීවිකරණය හඳුන්වා දෙන ලදී. 2019 වන විට, එය තවමත් කොටසක් ලෙස පෙනේ, එබැවින් ඔබම එකක් නිර්මාණය නොකරන්නේ මන්ද?
ඔබ ඉගෙන ගන්නා දේ:
- CSS ගුණාංගය සමඟ වැඩ කරන්න
keyframes
- HTML මූලද්රව්ය හැසිරවීම සහ සජීවීකරණය කිරීම
- JavaScript, HTML සහ CSS ඒකාබද්ධ කරන්න
Репозитории GitHub с функцией поиска
මෙහි විචිත්රවත් කිසිවක් නැත - GitHub ගබඩාවන් යනු උත්කර්ෂවත් ලැයිස්තුවක් පමණි.
ඉලක්කය වන්නේ ගබඩාවන් ප්රදර්ශනය කිරීම සහ පරිශීලකයාට ඒවා පෙරීමට ඉඩ දීමයි. භාවිත
GitHub පැතිකඩ පිටුව -
ඔබ ඉගෙන ගන්නා දේ:
- API වෙතින් දත්ත ලබා ගන්න
- API වෙතින් දත්ත පෙන්වන්න
- එක් එක් සෙවුම සඳහා අදාළ දත්ත පෙරීම සහ පෙන්වන්න
- විකල්ප: ඔබ අභියෝගයක් සඳහා සූදානම් නම්, භාවිතා කරන්න
ඒපීඅයි v4 , GraphQL භාවිතයෙන් ගොඩනගා ඇත.ඔබට GraphQL ඉගෙන ගැනීමට අවශ්ය නම්, මගේ පෙර ලිපි වලින් එකකට යන්න .
Чаты в стиле Reddit
කතාබස් යනු ඒවායේ සරල බව සහ භාවිතයේ පහසුව නිසා ජනප්රිය සන්නිවේදන ක්රමයකි. නමුත් නවීන කතාබස් කාමරවලට ඇත්තටම ඉන්ධන සපයන්නේ කුමක්ද? WebSockets!
ඔබ ඉගෙන ගන්නා දේ:
- WebSockets, තත්ය කාලීන සන්නිවේදනය සහ දත්ත යාවත්කාලීන භාවිතා කරන්න
- පරිශීලක ප්රවේශ මට්ටම් සමඟ වැඩ කරන්න (උදාහරණයක් ලෙස, චැට් නාලිකාවක හිමිකරුට භූමිකාව ඇත
admin
, සහ කාමරයේ සිටින අනෙකුත් අය -user
) - ආකෘති සැකසීම සහ වලංගු කිරීම - මතක තබා ගන්න, පණිවිඩයක් යැවීම සඳහා කතාබස් කවුළුව වේ
input
- විවිධ කතාබස් සාදන්න සහ සම්බන්ධ වන්න
- පුද්ගලික පණිවිඩ සමඟ වැඩ කරන්න. පරිශීලකයින්ට වෙනත් පරිශීලකයින් සමඟ පුද්ගලිකව කතාබස් කළ හැකිය. අත්යවශ්යයෙන්ම, ඔබ පරිශීලකයින් දෙදෙනෙකු අතර WebSocket සම්බන්ධතාවයක් ස්ථාපිත කරනු ඇත.
Навигация в стиле Stripe
මෙම සංචලනය සුවිශේෂී වන්නේ popover බහාලුම අන්තර්ගතයට ගැලපෙන පරිදි පරිවර්තනය වීමයි. නව popover විවෘත කිරීම සහ වසා දැමීමේ සාම්ප්රදායික හැසිරීම් වලට සාපේක්ෂව මෙම සංක්රමණයට අලංකාරයක් ඇත.
ඔබ ඉගෙන ගන්නා දේ:
- CSS සජීවිකරණ සංක්රාන්ති සමඟ ඒකාබද්ධ කරන්න
- අන්තර්ගතය අඳුරු කර පාවෙන මූලද්රව්යයට ක්රියාකාරී පන්තිය යොදන්න
පැක්මන්
Pacman හි ඔබේම අනුවාදයක් සාදන්න. ක්රීඩා සංවර්ධනය වන ආකාරය පිළිබඳ අදහසක් ලබා ගැනීමට සහ මූලික කරුණු තේරුම් ගැනීමට මෙය හොඳ ක්රමයකි. JavaScript රාමුවක්, ප්රතික්රියා හෝ Vue භාවිතා කරන්න.
ඔබ ඉගෙන ගනු ඇත:
- මූලද්රව්ය චලනය වන ආකාරය
- කුමන යතුරු එබිය යුතුද යන්න තීරණය කරන්නේ කෙසේද?
- ගැටීමේ මොහොත තීරණය කරන්නේ කෙසේද?
- ඔබට තවත් ඉදිරියට ගොස් අවතාර චලන පාලන එකතු කළ හැක
මෙම ව්යාපෘතියේ උදාහරණයක් ඔබට සොයාගත හැකිය
පරිශීලක කළමනාකරණය
ව්යාපෘති
පරිශීලක පරිපාලනය සඳහා CRUD ආකාරයේ යෙදුමක් නිර්මාණය කිරීම සංවර්ධනයේ මූලික කරුණු ඔබට උගන්වනු ඇත. මෙය නව සංවර්ධකයින් සඳහා විශේෂයෙන් ප්රයෝජනවත් වේ.
ඔබ ඉගෙන ගනු ඇත:
- මාර්ගගත කිරීම යනු කුමක්ද?
- දත්ත ඇතුළත් කිරීමේ පෝරම හසුරුවන්නේ කෙසේද සහ පරිශීලකයා ඇතුළත් කර ඇති දේ පරීක්ෂා කරන්න
- දත්ත සමුදාය සමඟ වැඩ කරන්නේ කෙසේද - ක්රියා නිර්මාණය කිරීම, කියවීම, යාවත්කාලීන කිරීම සහ මකා දැමීම
Проверка погоды в вашем местоположении
ව්යාපෘති
ඔබට යෙදුම් නිර්මාණය කිරීමට අවශ්ය නම්, කාලගුණ යෙදුමකින් ආරම්භ කරන්න. මෙම ව්යාපෘතිය 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 වලින්.
ඔබට දැනටමත් යන්ත්ර ඉගෙනීම පිළිබඳ අත්දැකීම් තිබේ නම්, විවිධ සමාජ ජාල වලින් දත්ත එකතු කර ඒවා ඒකාබද්ධ කිරීමට උත්සාහ කරන්න.
ඔබ ඉගෙන ගනු ඇත:
- යන්ත්ර ඉගෙනීම යනු කුමක්ද?
Клон Trello
ඔබ ඉගෙන ගන්නා දේ:
- ඉල්ලීම් සැකසීමේ මාර්ග සංවිධානය කිරීම (මාර්ගගත කිරීම).
- ඇදගෙන යන්න.
- නව වස්තූන් නිර්මාණය කරන්නේ කෙසේද (පුවරු, ලැයිස්තු, කාඩ්පත්).
- ආදාන දත්ත සැකසීම සහ පරීක්ෂා කිරීම.
- සේවාලාභියාගේ පැත්තෙන්: දේශීය ගබඩාව භාවිතා කරන්නේ කෙසේද, දේශීය ආචයනය වෙත දත්ත ඉතිරි කරන්නේ කෙසේද, දේශීය ගබඩාවෙන් දත්ත කියවන්නේ කෙසේද.
- සේවාදායකයේ පැත්තෙන්: දත්ත සමුදායන් භාවිතා කරන්නේ කෙසේද, දත්ත ගබඩාවේ දත්ත ගබඩා කරන්නේ කෙසේද, දත්ත සමුදායෙන් දත්ත කියවන්නේ කෙසේද.
Панель админа
සරල CRUD යෙදුමක්, මූලික කරුණු ඉගෙන ගැනීම සඳහා වඩාත් සුදුසුය. අපි ඉගෙන ගනිමු:
- පරිශීලකයින් සාදන්න, පරිශීලකයින් කළමනාකරණය කරන්න.
- දත්ත සමුදාය සමඟ අන්තර් ක්රියා කරන්න - පරිශීලකයින් සාදන්න, කියවන්න, සංස්කරණය කරන්න, මකන්න.
- ආදානය තහවුරු කිරීම සහ පෝරම සමඟ වැඩ කිරීම.
Трекер криптовалют (нативное мобильное приложение)
ඕනෑම දෙයක්: Swift, Objective-C, React Native, Java, Kotlin.
අපි අධ්යයනය කරමු:
- දේශීය යෙදුම් ක්රියා කරන ආකාරය.
- API වෙතින් දත්ත ලබා ගන්නේ කෙසේද.
- ස්වදේශීය පිටු පිරිසැලසුම් ක්රියා කරන ආකාරය.
- ජංගම සිමියුලේටර් සමඟ වැඩ කරන්නේ කෙසේද.
ඔබ උනන්දුවක් දක්වන්නේ නම්, මෙන්න එයයි
Настроить собственный конфиг webpack с нуля
තාක්ෂණික වශයෙන්, මෙය යෙදුමක් නොවේ, නමුත් 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
සෑම ජෙඩියෙකුටම තමාගේම හැකර් නිවුස් සෑදීම අවශ්ය වේ.
මඟදී ඔබ ඉගෙන ගන්නා දේ:
- Hackernews API සමඟ අන්තර් ක්රියා කරන්නේ කෙසේද.
- තනි පිටුවක යෙදුමක් සාදා ගන්නේ කෙසේද.
- අදහස් බැලීම, තනි අදහස්, පැතිකඩ වැනි විශේෂාංග ක්රියාත්මක කරන්නේ කෙසේද.
- ඉල්ලීම් සැකසීමේ මාර්ග සංවිධානය කිරීම (මාර්ගගත කිරීම).
Тудушечка
බරපතල ලෙස? තුදුෂ්කා? ඔවුන් දහස් ගණනක් ඇත. නමුත් මාව විශ්වාස කරන්න, මෙම ජනප්රියත්වය සඳහා හේතුවක් තිබේ.
Tudu යෙදුම ඔබට මූලික කරුණු අවබෝධ කර ගැනීමට හොඳ ක්රමයකි. එක් යෙදුමක් වැනිලා ජාවාස්ක්රිප්ට් වලින් සහ එකක් ඔබේ ප්රියතම රාමුවෙන් ලිවීමට උත්සාහ කරන්න.
ඉගෙන ගන්න:
- නව කාර්යයන් සාදන්න.
- ක්ෂේත්ර පුරවා ඇත්දැයි පරීක්ෂා කරන්න.
- පෙරහන් කාර්යයන් (සම්පූර්ණ, සක්රිය, සියල්ල). භාවිත
filter
иreduce
. - Javascript හි මූලික කරුණු තේරුම් ගන්න.
Сортируемый drag and drop список
තේරුම් ගැනීමට ඉතා උපකාරී වේ
අපි ඉගෙන ගනිමු:
- API ඇද දමන්න
- පොහොසත් UI සාදන්න
Клон мессенджера (нативное приложение)
වෙබ් යෙදුම් සහ ස්වදේශීය යෙදුම් යන දෙකම ක්රියා කරන ආකාරය ඔබට වැටහෙනු ඇත, එමඟින් ඔබව අළු ස්කන්ධයෙන් වෙන් කරනු ඇත.
අපි අධ්යයනය කරන දේ:
- වෙබ් සොකට් (ක්ෂණික පණිවිඩ)
- දේශීය යෙදුම් ක්රියා කරන ආකාරය.
- ස්වදේශීය යෙදුම්වල සැකිලි ක්රියා කරන ආකාරය.
- දේශීය යෙදුම්වල ඉල්ලීම් සැකසීමේ මාර්ග සංවිධානය කිරීම.
පෙළ සංස්කාරකය
පෙළ සංස්කාරකයක අරමුණ වනුයේ ඔවුන්ගේ හැඩතල ගැන්වීම වලංගු HTML සලකුණු බවට පරිවර්තනය කිරීමට උත්සාහ කරන පරිශීලකයන්ගේ උත්සාහය අඩු කිරීමයි. හොඳ පෙළ සංස්කාරකයක් පරිශීලකයින්ට විවිධ ආකාරවලින් පෙළ සංයුති කිරීමට ඉඩ දෙයි.
යම් අවස්ථාවක දී, සෑම කෙනෙකුම පෙළ සංස්කාරකයක් භාවිතා කර ඇත. ඉතින් ඇයි නැත්තේ
Клон Reddit
Reddit මගේ කාලයෙන් වැඩි කාලයක් ගත කරයි, නමුත් මම දිගටම එය මත රැඳී සිටිමි. Reddit ක්ලෝනයක් නිර්මාණය කිරීම ක්රමලේඛනය ඉගෙන ගැනීමට ඵලදායී ක්රමයකි (එකම අවස්ථාවේදීම Reddit බ්රවුස් කරන අතරතුර).
Reddit ඔබට ඉතා පොහොසත් සපයයි
කාර්යය දුර්වල ලෙස සිදු කරන බව ස්මාර්ට් සේවාදායකයින් වහාම වටහා ගන්නා අතර වෙනත් කෙනෙකු සොයා ගනු ඇත.
Публикация пакета NPM с открытым исходным кодом
ඔබ ජාවාස්ක්රිප්ට් කේතය ලියන්නේ නම්, ඔබ පැකේජ කළමණාකරුවෙකු භාවිතා කිරීමට ඉඩ ඇත. වෙනත් පුද්ගලයින් ලියා ප්රකාශයට පත් කර ඇති පවතින කේතය නැවත භාවිතා කිරීමට පැකේජ කළමනාකරු ඔබට ඉඩ සලසයි.
පැකේජයක සම්පූර්ණ සංවර්ධන චක්රය අවබෝධ කර ගැනීම ඉතා හොඳ අත්දැකීමක් ලබා දෙනු ඇත. කේතය ප්රකාශනය කිරීමේදී ඔබ දැනගත යුතු බොහෝ දේ ඇත. ඔබ ආරක්ෂාව, අර්ථකථන අනුවාදය, පරිමාණය, නම් කිරීමේ සම්මුතීන් සහ නඩත්තු කිරීම ගැන සිතා බැලිය යුතුය.
පැකේජය ඕනෑම දෙයක් විය හැකිය. ඔබට අදහසක් නොමැති නම්, ඔබේම Lodash නිර්මාණය කර එය පළ කරන්න.
Lodash:
ඔබ මාර්ගගතව කළ දෙයක් තිබීම ඔබව අන් අයට වඩා 10%කට වඩා ඉහළින් තබයි.
Учебный план freeCodeCamp
freeCodecamp බොහෝ දේ එකතු කර ඇත
freeCodeCamp යනු ලාභ නොලබන සංවිධානයකි. එය අන්තර්ක්රියාකාරී වෙබ් පාදක ඉගෙනුම් වේදිකාවක්, සබැඳි ප්රජා සංසදයක්, කතාබස් කාමර, මධ්යම ප්රකාශන සහ සෑම කෙනෙකුටම ඉගෙනීමේ වෙබ් සංවර්ධනය ප්රවේශ කිරීමට අදහස් කරන ප්රාදේශීය සංවිධාන වලින් සමන්විත වේ.
ඔබ සම්පූර්ණ පාඨමාලාව සම්පූර්ණ කිරීමට සමත් වන්නේ නම්, ඔබ ඔබේ පළමු රැකියාවට වඩා සුදුසුකම් ලබනු ඇත.
Создайте HTTP-сервер с нуля
HTTP ප්රොටෝකෝලය යනු අන්තර්ජාලයේ අන්තර්ගතය ගමන් කරන ප්රධාන ප්රොටෝකෝලයකි. HTTP සේවාදායකයන් HTML, CSS සහ JS වැනි ස්ථිතික අන්තර්ගතයන් සැපයීමට භාවිතා කරයි.
මුල සිටම HTTP ප්රොටෝකෝලය ක්රියාත්මක කිරීමට හැකිවීම දේවල් අන්තර්ක්රියා කරන ආකාරය පිළිබඳ ඔබේ දැනුම පුළුල් කරයි.
උදාහරණයක් ලෙස, ඔබ NodeJs භාවිතා කරන්නේ නම්, Express HTTP සේවාදායකයක් සපයන බව ඔබ දන්නවා.
යොමුව සඳහා, ඔබට හැකිදැයි බලන්න:
- කිසිදු පුස්තකාලයක් භාවිතා නොකර සේවාදායකයක් සකසන්න
- සේවාදායකය HTML, CSS සහ JS අන්තර්ගතයට සේවය කළ යුතුය.
- මුල සිටම රවුටරයක් ක්රියාත්මක කිරීම
- වෙනස්කම් නිරීක්ෂණය කර සේවාදායකය යාවත්කාලීන කරන්න
ඇයි දැයි නොදන්නේ නම්, භාවිතා කරන්න
Десктопное приложение для заметок
අපි හැමෝම සටහන් ගන්නවා නේද?
අපි සටහන් යෙදුමක් නිර්මාණය කරමු. යෙදුමට සටහන් සුරැකීමට සහ ඒවා දත්ත සමුදාය සමඟ සමමුහුර්ත කිරීමට අවශ්ය වේ. ඉලෙක්ට්රෝන, ස්විෆ්ට් හෝ ඔබ කැමති ඕනෑම දෙයක් සහ ඔබේ පද්ධතියට ක්රියා කරන දේ භාවිතයෙන් ස්වදේශීය යෙදුමක් සාදන්න.
මෙය පළමු අභියෝගය (පෙළ සංස්කාරකය) සමඟ ඒකාබද්ධ කිරීමට නිදහස් වන්න.
ප්රසාද දීමනාවක් ලෙස, ඔබේ ඩෙස්ක්ටොප් අනුවාදය වෙබ් අනුවාදය සමඟ සමමුහුර්ත කිරීමට උත්සාහ කරන්න.
Подкасты (клон Overcast)
පොඩ්කාස්ට් වලට සවන් නොදෙන්නේ කවුද?
පහත ක්රියාකාරීත්වය සහිත වෙබ් යෙදුමක් සාදන්න:
- ගිණුමක් තනන්න
- පොඩ්කාස්ට් සොයන්න
- පොඩ්කාස්ට් අගයන්න සහ දායක වන්න
- තත්පර 30 ක් සඳහා නවත්වන්න සහ සෙල්ලම් කරන්න, වේගය වෙනස් කරන්න, ඉදිරියට සහ පසුගාමී කාර්යයන්.
ආරම්භක ලක්ෂ්යයක් ලෙස iTunes API භාවිතා කිරීමට උත්සාහ කරන්න. ඔබ වෙනත් සම්පත් දන්නේ නම්, කරුණාකර අදහස් දැක්වීම්වල පළ කරන්න.
තිර ග්රහණය
ආයුබෝවන්! මම දැන් මගේ තිරය රූගත කරනවා!
ඔබේ තිරය ග්රහණය කර ගැනීමට සහ පසුරුපය මෙසේ සුරැකීමට ඉඩ දෙන ඩෙස්ක්ටොප් එකක් හෝ වෙබ් යෙදුමක් සාදන්න .gif
මෙහි
මුලාශ්ර
සංවර්ධකයා සඳහා තවත් නිර්භීත පුහුණු ව්යාපෘති 5ක් (Layer, Squoosh, Calculator, Website Crawler, Music Player) ඔබේ Front-End කුසලතා ඔප්නැංවීමට ව්යාපෘති 9ක් Front-End සංවර්ධකයෙකු සඳහා කාර්යයන් හයක් සංවර්ධකයෙකු සඳහා විනෝද පුහුණුව -
අධ්යාපනික ව්යාපෘති 8ක් -
පුහුණු වීමට තවත් ව්යාපෘති ලැයිස්තුවක්
මූලාශ්රය: www.habr.com