ഫ്രണ്ട്-എൻഡ് ഡോജോ: ഡെവലപ്പർ കഴിവുകളെ പരിശീലിപ്പിക്കുന്നതിനുള്ള പ്രോജക്ടുകൾ (5 പുതിയത് + 43 പഴയത്)

1. Клон Notion

Приложение Notion полюбилось многим, оно позволяет оптимизировать рабочий процесс, работать с документами, планировать задачи, синхронизировать данные между устройствами.

www.notion.so

Чему вы научитесь, создавая клон Notion:

• HTML Drag and drop API. Пользователь может «схватить мышкой» draggable элемент и поместить его в droppable зону.
• Как синхронизировать в режиме реального времени данные между компьютером и смартфоном.
• Мы позволяем пользователям создавать, читать, обновлять и удалять записи, тем самым мы тренируем CRUD-навыки.

എഡിസൺ സോഫ്റ്റ്‌വെയറിന്റെ പിന്തുണയോടെയാണ് ലേഖനം വിവർത്തനം ചെയ്തത് разрабатывает приложения и сайты, അതുപോലെ തന്നെ സ്റ്റാർട്ടപ്പുകളിൽ നിക്ഷേപിക്കുന്നു.

2. Клон Repl.it

Repl.it -это инструмент для совместного редактирования кода в реальном времени. Можно выбрать несколько языков: JavaScript, Python, Go и выполнять код прямо в браузере. Очень полезно для быстрых демонстраций и код-интервью.

repl.it

Чему вы научитесь, создавая клон Repl.it:

• Как запускать и выполнять код (server-side) в браузере (client-side).
• Считывать входные данные (исходный код) и выводить на экран результат выполнения.
• Как создавать файлы и папки в вебе и сохранять результаты.
• Как подсвечивать синтаксис кода.

3. Клон Google Photos

Google Photos это сервис для хранения и обмена фоток.
Любое современное приложение по работе с фотографиями умеет выполнять базовые функции: загружать, обрезать и пр. Люди хотят создавать свои аватарки и делиться фотками котиков, поэтому надо уметь работать с изображениями.

www.google.com/photos/about

Чему вы научитесь, создавая клон Google Photos:

• Как создавать адаптивные изображения на телефонах, планшетах, ноутбуках и даже на гигантских экранах телевизоров.
• Как обрабатывать загрузку изображений, особенно больших изображений (>1МБ) и массовых загрузок.
• Обработка файлов изображений, обрезка и изменение размера фотографий для миниатюр или при открытии галереи.
• ബോണസ്: как хранить изображения в облаке или локальной базе данных.

4. Клон Gifsky

ഗിഫ്സ്കി конвертирует видео в GIF используя функцииpngquant для эффективных палитр кросс-кадров и временного сглаживания. В результате получается гифка с тысячами цветов на кадр.

gif.ski

Чему вы научитесь, создавая клон Gifski:

• Как конвертировать видео файлы (.mp4 в .gif).
• Как использовать API Drag and Drop HTML.
• Как работают оптимизация и обработка изображений.

കുറിപ്പ്: Gifsky — это проект с открытым исходным кодом и есть на GitHub!

5. Мониторинг курсов криптовалют

React Native cryptocurrency tracker

Чему вы научитесь, создавая трекер курса валют:

• Как работать с API и получать данные удаленно из API.
• Как отобразить данные в виде списка.
• ബോണസ്: Если вам интересно, я недавно написал туториал по созданию трекера цен на криптовалюту с React Native.

കുറിപ്പ്: ഇവിടെ GitHub example repository.

Подборка проектов из предыдущих публикаций.

ലെയർ

www.reddit.com/r/layer

പങ്കിട്ട "ബോർഡിൽ" എല്ലാവർക്കും പിക്സൽ വരയ്ക്കാൻ കഴിയുന്ന ഒരു കമ്മ്യൂണിറ്റിയാണ് ലെയർ. റെഡ്ഡിറ്റിലാണ് യഥാർത്ഥ ആശയം ജനിച്ചത്. ആർ/ലെയർ കമ്മ്യൂണിറ്റി എന്നത് പങ്കിട്ട സർഗ്ഗാത്മകതയുടെ ഒരു രൂപകമാണ്, എല്ലാവർക്കും ഒരു സ്രഷ്ടാവാകാനും ഒരു പൊതു ലക്ഷ്യത്തിലേക്ക് സംഭാവന നൽകാനും കഴിയും.

നിങ്ങളുടെ സ്വന്തം ലെയർ പ്രോജക്റ്റ് സൃഷ്ടിക്കുമ്പോൾ നിങ്ങൾ എന്താണ് പഠിക്കുന്നത്:

• JavaScript ക്യാൻവാസ് എങ്ങനെ പ്രവർത്തിക്കുന്നു ഒരു ക്യാൻവാസ് എങ്ങനെ പ്രവർത്തിപ്പിക്കണമെന്ന് അറിയുന്നത് പല ആപ്ലിക്കേഷനുകളിലും ഒരു നിർണായക വൈദഗ്ധ്യമാണ്.
• ഉപയോക്തൃ അനുമതികൾ എങ്ങനെ ഏകോപിപ്പിക്കാം. ഓരോ ഉപയോക്താവിനും ലോഗിൻ ചെയ്യാതെ തന്നെ ഓരോ 15 മിനിറ്റിലും ഒരു പിക്സൽ വരയ്ക്കാനാകും.
• കുക്കി സെഷനുകൾ സൃഷ്ടിക്കുക.

സ്ക്വോഷ്

squoosh.app

നിരവധി വിപുലമായ ഓപ്ഷനുകളുള്ള ഒരു ഇമേജ് കംപ്രഷൻ ആപ്ലിക്കേഷനാണ് Squoosh.

GIF 20 MB

Squoosh-ന്റെ നിങ്ങളുടെ സ്വന്തം പതിപ്പ് സൃഷ്ടിക്കുന്നതിലൂടെ നിങ്ങൾ പഠിക്കും:

• ഇമേജ് വലുപ്പത്തിൽ എങ്ങനെ പ്രവർത്തിക്കാം
• Drag'n'Drop API-യുടെ അടിസ്ഥാനകാര്യങ്ങൾ അറിയുക
• എപിഐയും ഇവന്റ് ലിസണറുകളും എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്ന് മനസ്സിലാക്കുക
• ഫയലുകൾ എങ്ങനെ അപ്‌ലോഡ് ചെയ്യുകയും കയറ്റുമതി ചെയ്യുകയും ചെയ്യാം

കുറിപ്പ്: ഇമേജ് കംപ്രസർ പ്രാദേശികമാണ്. സെർവറിലേക്ക് അധിക ഡാറ്റ അയയ്ക്കേണ്ട ആവശ്യമില്ല. നിങ്ങൾക്ക് വീട്ടിൽ കംപ്രസർ ഉണ്ടായിരിക്കാം, അല്ലെങ്കിൽ നിങ്ങൾക്കത് സെർവറിൽ ഉപയോഗിക്കാം, നിങ്ങളുടെ ഇഷ്ടത്തിനനുസരിച്ച്.

കാൽക്കുലേറ്റർ

വരിക? ഗൗരവമായി? കാൽക്കുലേറ്റർ? അതെ, കൃത്യമായി, ഒരു കാൽക്കുലേറ്റർ. ഗണിത പ്രവർത്തനങ്ങളുടെ അടിസ്ഥാനകാര്യങ്ങളും അവ എങ്ങനെ ഒരുമിച്ച് പ്രവർത്തിക്കുന്നു എന്നതും നിങ്ങളുടെ ആപ്ലിക്കേഷനുകൾ ലളിതമാക്കുന്നതിനുള്ള ഒരു നിർണായക വൈദഗ്ധ്യമാണ്. താമസിയാതെ അല്ലെങ്കിൽ പിന്നീട് നിങ്ങൾ നമ്പറുകൾ കൈകാര്യം ചെയ്യേണ്ടി വരും, എത്രയും വേഗം നല്ലത്.

jarodburchill.github.io/CalculatorReactApp

നിങ്ങളുടെ സ്വന്തം കാൽക്കുലേറ്റർ സൃഷ്ടിക്കുന്നതിലൂടെ നിങ്ങൾ പഠിക്കും:

• അക്കങ്ങളും ഗണിത പ്രവർത്തനങ്ങളും ഉപയോഗിച്ച് പ്രവർത്തിക്കുക
• ഇവന്റ് ലിസണേഴ്സ് API ഉപയോഗിച്ച് പരിശീലിക്കുക
• ഘടകങ്ങൾ എങ്ങനെ ക്രമീകരിക്കാം, ശൈലികൾ മനസ്സിലാക്കുക

ക്രാളർ (സെർച്ച് എഞ്ചിൻ)

എല്ലാവരും ഒരു സെർച്ച് എഞ്ചിൻ ഉപയോഗിച്ചിട്ടുണ്ട്, അതിനാൽ എന്തുകൊണ്ട് നിങ്ങളുടേതായ രീതിയിൽ സൃഷ്ടിച്ചുകൂടാ? വിവരങ്ങൾ തിരയാൻ ക്രാളറുകൾ ആവശ്യമാണ്. എല്ലാവരും അവ ദിവസവും ഉപയോഗിക്കുന്നു, ഈ സാങ്കേതികവിദ്യയുടെയും സ്പെഷ്യലിസ്റ്റുകളുടെയും ആവശ്യം കാലക്രമേണ വളരും.

ഗൂഗിൾ സെർച്ച് എഞ്ചിൻ

നിങ്ങളുടെ സ്വന്തം സെർച്ച് എഞ്ചിൻ സൃഷ്ടിക്കുന്നതിലൂടെ നിങ്ങൾ എന്താണ് പഠിക്കുന്നത്:

• ക്രാളറുകൾ എങ്ങനെ പ്രവർത്തിക്കുന്നു
• സൈറ്റുകൾ എങ്ങനെ സൂചികയിലാക്കാം, റേറ്റിംഗും പ്രശസ്തിയും ഉപയോഗിച്ച് അവയെ എങ്ങനെ റാങ്ക് ചെയ്യാം
• ഒരു ഡാറ്റാബേസിൽ ഇൻഡെക്‌സ് ചെയ്‌ത സൈറ്റുകൾ എങ്ങനെ സംഭരിക്കാം, ഡാറ്റാബേസിൽ എങ്ങനെ പ്രവർത്തിക്കാം

മ്യൂസിക് പ്ലെയർ (Spotify, Apple Music)

എല്ലാവരും സംഗീതം കേൾക്കുന്നു - ഇത് നമ്മുടെ ജീവിതത്തിന്റെ അവിഭാജ്യ ഘടകമാണ്. ഒരു ആധുനിക സംഗീത സ്ട്രീമിംഗ് പ്ലാറ്റ്‌ഫോമിന്റെ അടിസ്ഥാന മെക്കാനിക്‌സ് എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്ന് നന്നായി മനസ്സിലാക്കാൻ നമുക്ക് ഒരു മ്യൂസിക് പ്ലെയർ സൃഷ്‌ടിക്കാം.

നീനുവിനും

നിങ്ങളുടെ സ്വന്തം മ്യൂസിക് സ്ട്രീമിംഗ് പ്ലാറ്റ്ഫോം സൃഷ്ടിച്ചുകൊണ്ട് നിങ്ങൾ എന്താണ് പഠിക്കുന്നത്:

• API ഉപയോഗിച്ച് എങ്ങനെ പ്രവർത്തിക്കാം. Spotify അല്ലെങ്കിൽ Apple Music-ൽ നിന്നുള്ള API ഉപയോഗിക്കുക
• അടുത്ത/മുമ്പത്തെ ട്രാക്കിലേക്ക് എങ്ങനെ പ്ലേ ചെയ്യാം, താൽക്കാലികമായി നിർത്താം അല്ലെങ്കിൽ റിവൈൻഡ് ചെയ്യാം
• വോളിയം എങ്ങനെ മാറ്റാം
• ഉപയോക്തൃ റൂട്ടിംഗും ബ്രൗസർ ചരിത്രവും എങ്ങനെ കൈകാര്യം ചെയ്യാം

റിയാക്റ്റ് ഉപയോഗിച്ച് മൂവി സെർച്ച് ആപ്പ് (ഹുക്കുകൾ ഉള്ളത്)

റിയാക്റ്റ് ഉപയോഗിച്ച് ഒരു മൂവി സെർച്ച് ആപ്പ് സൃഷ്‌ടിക്കുക എന്നതാണ് നിങ്ങൾക്ക് ആദ്യം ആരംഭിക്കാൻ കഴിയുന്നത്. അന്തിമ ആപ്ലിക്കേഷൻ എങ്ങനെയായിരിക്കുമെന്നതിന്റെ ഒരു ചിത്രം ചുവടെയുണ്ട്:

നിങ്ങൾ എന്ത് പഠിക്കും
ഈ ആപ്പ് നിർമ്മിക്കുന്നതിലൂടെ, താരതമ്യേന പുതിയ Hooks API ഉപയോഗിച്ച് നിങ്ങളുടെ പ്രതികരണ കഴിവുകൾ മെച്ചപ്പെടുത്തും. ഉദാഹരണ പ്രോജക്റ്റ് റിയാക്റ്റ് ഘടകങ്ങൾ, ധാരാളം കൊളുത്തുകൾ, ഒരു ബാഹ്യ API, തീർച്ചയായും ചില CSS സ്റ്റൈലിംഗ് എന്നിവ ഉപയോഗിക്കുന്നു.

ടെക് സ്റ്റാക്കും സവിശേഷതകളും

• കൊളുത്തുകൾ ഉപയോഗിച്ച് പ്രതികരിക്കുക
• സൃഷ്ടിക്കുക-പ്രതികരിക്കുക-അപ്ലിക്കേഷൻ
• ജെ.എസ്.എക്സ്
• സി.എസ്.എസ്

ക്ലാസുകളൊന്നും ഉപയോഗിക്കാതെ തന്നെ, ഈ പ്രോജക്റ്റുകൾ നിങ്ങൾക്ക് ഫങ്ഷണൽ റിയാക്ടിലേക്ക് മികച്ച എൻട്രി പോയിന്റ് നൽകുന്നു, 2020-ൽ തീർച്ചയായും നിങ്ങളെ സഹായിക്കും. നിങ്ങൾക്കു കണ്ടു പിടിക്കാം ഇവിടെ പ്രോജക്റ്റ് ഉദാഹരണം. നിർദ്ദേശങ്ങൾ പാലിക്കുക അല്ലെങ്കിൽ നിങ്ങളുടേതാക്കുക.

Vue ഉപയോഗിച്ച് ചാറ്റ് ആപ്പ്

എന്റെ പ്രിയപ്പെട്ട ജാവാസ്ക്രിപ്റ്റ് ലൈബ്രറി ഉപയോഗിച്ച് ഒരു ചാറ്റ് ആപ്പ് സൃഷ്‌ടിക്കുക എന്നതാണ് നിങ്ങൾക്കുള്ള മറ്റൊരു മികച്ച പ്രോജക്റ്റ്: VueJS. ആപ്ലിക്കേഷൻ ഇതുപോലെ കാണപ്പെടും:

നിങ്ങൾ എന്ത് പഠിക്കും
ഈ ട്യൂട്ടോറിയലിൽ, ആദ്യം മുതൽ Vue ആപ്പ് എങ്ങനെ നിർമ്മിക്കാമെന്ന് നിങ്ങൾ പഠിക്കും - ഘടകങ്ങൾ സൃഷ്‌ടിക്കുക, അവസ്ഥ കൈകാര്യം ചെയ്യുക, റൂട്ടുകൾ സൃഷ്‌ടിക്കുക, മൂന്നാം കക്ഷി സേവനങ്ങളിലേക്ക് കണക്റ്റുചെയ്യുക, കൂടാതെ പ്രാമാണീകരണം പോലും കൈകാര്യം ചെയ്യുക.

ടെക് സ്റ്റാക്കും സവിശേഷതകളും

• വ്യൂ
• വ്യൂഎക്സ്
• വ്യൂ റൂട്ടർ
• വ്യൂ CLI
• പുഷർ
• സി.എസ്.എസ്

2020-ൽ വികസിക്കുന്നതിന് Vue ഉപയോഗിച്ച് ആരംഭിക്കുന്നതിനോ നിലവിലുള്ള കഴിവുകൾ മെച്ചപ്പെടുത്തുന്നതിനോ ഉള്ള മികച്ച പ്രോജക്റ്റാണിത്. നിങ്ങൾക്കു കണ്ടു പിടിക്കാം ട്യൂട്ടോറിയൽ ഇവിടെ.

Angular 8 ഉള്ള മനോഹരമായ കാലാവസ്ഥാ ആപ്പ്

Angular 8 ഉപയോഗിച്ച് മനോഹരമായ ഒരു കാലാവസ്ഥാ ആപ്പ് സൃഷ്ടിക്കാൻ ഈ ഉദാഹരണം നിങ്ങളെ സഹായിക്കും:

നിങ്ങൾ എന്ത് പഠിക്കും
ഈ പ്രോജക്റ്റ് ആദ്യം മുതൽ ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കുന്നതിനുള്ള മൂല്യവത്തായ കഴിവുകൾ നിങ്ങളെ പഠിപ്പിക്കും - ഡിസൈൻ മുതൽ വികസനം വരെ, വിന്യാസത്തിന് തയ്യാറായ ആപ്ലിക്കേഷൻ വരെ.

ടെക് സ്റ്റാക്കും സവിശേഷതകളും

• കോണീയ 8
• ഫയർബേസ്
• സെർവർ സൈഡ് റെൻഡറിംഗ്
• ഗ്രിഡും ഫ്ലെക്സ്ബോക്സും ഉള്ള CSS
• മൊബൈൽ സൗഹൃദവും പൊരുത്തപ്പെടുത്തലും
• ഇരുണ്ട മോഡ്
• മനോഹരമായ ഇന്റർഫേസ്

എല്ലാം ഉൾക്കൊള്ളുന്ന ഈ പ്രോജക്റ്റിനെക്കുറിച്ച് ഞാൻ ശരിക്കും ഇഷ്ടപ്പെടുന്നത് നിങ്ങൾ ഒറ്റപ്പെട്ട് കാര്യങ്ങൾ പഠിക്കുന്നില്ല എന്നതാണ്. പകരം, ഡിസൈൻ മുതൽ അന്തിമ വിന്യാസം വരെയുള്ള മുഴുവൻ വികസന പ്രക്രിയയും നിങ്ങൾ പഠിക്കുന്നു.

Svelte ഉപയോഗിച്ച് ചെയ്യേണ്ട ആപ്ലിക്കേഷൻ

ഘടകത്തെ അടിസ്ഥാനമാക്കിയുള്ള സമീപനത്തിലെ പുതിയ കുട്ടിയെ പോലെയാണ് സ്വെൽറ്റ് - കുറഞ്ഞത് റിയാക്റ്റ്, വ്യൂ, ആംഗുലാർ എന്നിവയ്ക്ക് സമാനമാണ്. 2020-ലെ ഏറ്റവും പുതിയ ഉൽപ്പന്നങ്ങളിൽ ഒന്നാണിത്.

ചെയ്യേണ്ട ആപ്പുകൾ ഏറ്റവും ചൂടേറിയ വിഷയം ആയിരിക്കണമെന്നില്ല, എന്നാൽ നിങ്ങളുടെ സ്വെൽറ്റ് കഴിവുകൾ വികസിപ്പിക്കാൻ ഇത് നിങ്ങളെ സഹായിക്കും. ഇത് ഇതുപോലെ കാണപ്പെടും:

നിങ്ങൾ എന്ത് പഠിക്കും
തുടക്കം മുതൽ അവസാനം വരെ Svelte 3 ഉപയോഗിച്ച് ഒരു ആപ്ലിക്കേഷൻ എങ്ങനെ സൃഷ്ടിക്കാമെന്ന് ഈ ട്യൂട്ടോറിയൽ നിങ്ങളെ കാണിക്കും. നിങ്ങൾ ഘടകങ്ങൾ, സ്റ്റൈലിംഗ്, ഇവന്റ് ഹാൻഡ്‌ലറുകൾ എന്നിവ ഉപയോഗിക്കും

ടെക് സ്റ്റാക്കും സവിശേഷതകളും

• സ്വെൽറ്റ് 3
• ഘടകങ്ങൾ
• CSS ഉപയോഗിച്ച് സ്റ്റൈലിംഗ്
• ES 6 വാക്യഘടന

ധാരാളം നല്ല Svelte സ്റ്റാർട്ടർ പ്രോജക്ടുകൾ ഇല്ല, അതിനാൽ ഞാൻ കണ്ടെത്തി ഇത് ആരംഭിക്കുന്നതിനുള്ള ഒരു നല്ല ഓപ്ഷനാണ്.

Next.js ഉപയോഗിക്കുന്ന ഇ-കൊമേഴ്‌സ് ആപ്പ്

ബോക്‌സിന് പുറത്ത് സെർവർ-സൈഡ് റെൻഡറിംഗിനെ പിന്തുണയ്ക്കുന്ന റിയാക്റ്റ് ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കുന്നതിനുള്ള ഏറ്റവും ജനപ്രിയമായ ചട്ടക്കൂടാണ് Next.js.

ഇതുപോലെയുള്ള ഒരു ഇ-കൊമേഴ്‌സ് ആപ്ലിക്കേഷൻ എങ്ങനെ സൃഷ്ടിക്കാമെന്ന് ഈ പ്രോജക്റ്റ് നിങ്ങളെ കാണിക്കും:

നിങ്ങൾ എന്ത് പഠിക്കും
ഈ പ്രോജക്‌റ്റിൽ, Next.js-നൊപ്പം എങ്ങനെ വികസിപ്പിക്കാമെന്ന് നിങ്ങൾ പഠിക്കും—പുതിയ പേജുകളും ഘടകങ്ങളും സൃഷ്‌ടിക്കുക, ഡാറ്റ എക്‌സ്‌ട്രാക്‌റ്റ് ചെയ്യുക, സ്‌റ്റൈൽ എന്നിവ സൃഷ്‌ടിക്കുക, അടുത്ത അപ്ലിക്കേഷൻ വിന്യസിക്കുക.

ടെക് സ്റ്റാക്കും സവിശേഷതകളും

• Next.js
• ഘടകങ്ങളും പേജുകളും
• ഡാറ്റ സാമ്പിൾ
• ശൈലി
• പദ്ധതി വിന്യാസം
• എസ്എസ്ആർ, എസ്പിഎ

പുതിയ എന്തെങ്കിലും പഠിക്കാൻ ഒരു ഇ-കൊമേഴ്‌സ് ആപ്പ് പോലുള്ള ഒരു യഥാർത്ഥ ലോക ഉദാഹരണം ഉണ്ടായിരിക്കുന്നത് എല്ലായ്പ്പോഴും മികച്ചതാണ്. നിങ്ങൾക്ക് കഴിയും ഇവിടെ ട്യൂട്ടോറിയൽ കണ്ടെത്തുക.

Nuxt.js ഉള്ള പൂർണ്ണമായ ബഹുഭാഷാ ബ്ലോഗ്

ന്യൂക്‌സ്
നിങ്ങൾക്ക് സൃഷ്ടിക്കാൻ കഴിയുന്ന അവസാന ആപ്ലിക്കേഷൻ ഇതുപോലെ കാണപ്പെടും:

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

ഈ സാമ്പിൾ പ്രോജക്റ്റിൽ, പ്രാരംഭ സജ്ജീകരണം മുതൽ അന്തിമ വിന്യാസം വരെ, Nuxt.js ഉപയോഗിച്ച് ഒരു സമ്പൂർണ്ണ വെബ്‌സൈറ്റ് എങ്ങനെ സൃഷ്ടിക്കാമെന്ന് നിങ്ങൾ പഠിക്കും.

പേജുകളും ഘടകങ്ങളും, SCSS ഉപയോഗിച്ചുള്ള സ്റ്റൈലിംഗും പോലെ, Nuxt വാഗ്ദാനം ചെയ്യുന്ന നിരവധി രസകരമായ ഫീച്ചറുകൾ ഇത് പ്രയോജനപ്പെടുത്തുന്നു.

ടെക് സ്റ്റാക്കും സവിശേഷതകളും

• Nuxt.js
• ഘടകങ്ങളും പേജുകളും
• സ്റ്റോറിബ്ലോക്ക് മൊഡ്യൂൾ
• ഹാഗ്ഫിഷ്
• സംസ്ഥാന മാനേജ്മെന്റിനുള്ള Vuex
• സ്റ്റൈലിംഗിനുള്ള SCSS
• ന്യൂക്സ്റ്റ് മിഡിൽവെയർ

ഇത് ശരിക്കും രസകരമായ ഒരു പദ്ധതിയാണ്, ഇതിൽ നിരവധി മികച്ച Nuxt.js സവിശേഷതകൾ ഉൾപ്പെടുന്നു. നക്‌സ്റ്റിനൊപ്പം പ്രവർത്തിക്കുന്നത് എനിക്ക് വ്യക്തിപരമായി ഇഷ്ടമാണ്, അതിനാൽ നിങ്ങൾ ഇത് പരീക്ഷിച്ചുനോക്കൂ, കാരണം ഇത് നിങ്ങളെ മികച്ച വ്യൂ ഡെവലപ്പറാക്കും.

ഗാറ്റ്‌സ്‌ബിയ്‌ക്കൊപ്പം ബ്ലോഗ്

React ഉം GraphQL ഉം ഉപയോഗിക്കുന്ന ഒരു മികച്ച സ്റ്റാറ്റിക് സൈറ്റ് ജനറേറ്ററാണ് ഗാറ്റ്സ്ബി. പദ്ധതിയുടെ ഫലം ഇതാണ്:

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

ഈ ട്യൂട്ടോറിയലിൽ, React, GraphQL എന്നിവ ഉപയോഗിച്ച് നിങ്ങളുടെ സ്വന്തം ലേഖനങ്ങൾ എഴുതാൻ ഉപയോഗിക്കുന്ന ഒരു ബ്ലോഗ് സൃഷ്ടിക്കാൻ Gatsby എങ്ങനെ ഉപയോഗിക്കാമെന്ന് നിങ്ങൾ പഠിക്കും.

ടെക് സ്റ്റാക്കും സവിശേഷതകളും

• ഗാറ്റ്സ്ബി
• തിരിച്ചടി നടത്തുക
• ഗ്രാഫിക്
• പ്ലഗിനുകളും തീമുകളും
• MDX/മാർക്ക്ഡൗൺ
• ബൂട്ട്സ്ട്രാപ്പ് CSS
• ടെംപ്ലേറ്റുകൾ

നിങ്ങൾക്ക് എപ്പോഴെങ്കിലും ഒരു ബ്ലോഗ് തുടങ്ങാൻ ആഗ്രഹമുണ്ടെങ്കിൽ, ഇതൊരു മികച്ച ഉദാഹരണമാണ് React ഉം GraphQL ഉം ഉപയോഗിച്ച് ഇത് എങ്ങനെ നിർമ്മിക്കാം എന്നതിനെക്കുറിച്ച്.

വേർഡ്പ്രസ്സ് ഒരു മോശം തിരഞ്ഞെടുപ്പാണെന്ന് ഞാൻ പറയുന്നില്ല, എന്നാൽ ഗാറ്റ്‌സ്ബി ഉപയോഗിച്ച് നിങ്ങൾക്ക് റിയാക്റ്റ് ഉപയോഗിച്ച് ഉയർന്ന പ്രകടനമുള്ള വെബ്‌സൈറ്റുകൾ നിർമ്മിക്കാൻ കഴിയും - ഇത് അതിശയകരമായ സംയോജനമാണ്.

ഗ്രിഡ്‌സം ഉള്ള ബ്ലോഗ്

Vue-യ്‌ക്കുള്ള ഗ്രിഡ്‌സം... ശരി, ഞങ്ങൾക്ക് ഇത് മുമ്പേ തന്നെ Next/Nuxt-നൊപ്പം ഉണ്ടായിരുന്നു.
എന്നാൽ ഗ്രിഡ്‌സോമിനും ഗാറ്റ്‌സ്‌ബിക്കും ഇത് ബാധകമാണ്. രണ്ടും അവരുടെ ഡാറ്റ ലെയറായി GraphQL ഉപയോഗിക്കുന്നു, എന്നാൽ Gridsome VueJS ഉപയോഗിക്കുന്നു. മികച്ച ബ്ലോഗുകൾ സൃഷ്ടിക്കാൻ നിങ്ങളെ സഹായിക്കുന്ന ഒരു അതിശയകരമായ സ്റ്റാറ്റിക് സൈറ്റ് ജനറേറ്റർ കൂടിയാണിത്:

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

ഗ്രിഡ്‌സോം, ഗ്രാഫ്ക്യുഎൽ, മാർക്ക്ഡൗൺ എന്നിവ ഉപയോഗിച്ച് ആരംഭിക്കുന്നതിന് ലളിതമായ ഒരു ബ്ലോഗ് എങ്ങനെ സൃഷ്ടിക്കാമെന്ന് ഈ പ്രോജക്റ്റ് നിങ്ങളെ പഠിപ്പിക്കും. Netlify വഴി ഒരു ആപ്ലിക്കേഷൻ എങ്ങനെ വിന്യസിക്കാമെന്നും ഇത് ഉൾക്കൊള്ളുന്നു.

ടെക് സ്റ്റാക്കും സവിശേഷതകളും

• ഗ്രിഡ്സോം
• വ്യൂ
• ഗ്രാഫിക്
• മര്ക്ദൊവ്ന്
• നെറ്റ്ലൈഫുചെയ്യുക

ഇത് തീർച്ചയായും ഏറ്റവും സമഗ്രമായ ട്യൂട്ടോറിയൽ അല്ല, പക്ഷേ ഇത് ഗ്രിഡ്‌സോമിന്റെ അടിസ്ഥാന ആശയങ്ങൾ ഉൾക്കൊള്ളുന്നു. മാർക്ക്ഡൗൺ ഒരു നല്ല തുടക്കമായിരിക്കാം.

ക്വാസർ ഉപയോഗിക്കുന്ന സൗണ്ട്ക്ലൗഡ് പോലെയുള്ള ഓഡിയോ പ്ലെയർ

മൊബൈൽ ആപ്ലിക്കേഷനുകൾ സൃഷ്ടിക്കാൻ ഉപയോഗിക്കാവുന്ന മറ്റൊരു വ്യൂ ചട്ടക്കൂടാണ് ക്വാസർ. ഈ പ്രോജക്റ്റിൽ നിങ്ങൾ ഒരു ഓഡിയോ പ്ലെയർ ആപ്ലിക്കേഷൻ സൃഷ്ടിക്കും, ഉദാഹരണത്തിന്:

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

മറ്റ് പ്രോജക്റ്റുകൾ പ്രധാനമായും വെബ് ആപ്ലിക്കേഷനുകളിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുമ്പോൾ, Vue, Quasar ഫ്രെയിംവർക്ക് എന്നിവ ഉപയോഗിച്ച് ഒരു മൊബൈൽ ആപ്ലിക്കേഷൻ എങ്ങനെ സൃഷ്ടിക്കാമെന്ന് ഇത് കാണിക്കും.
ആൻഡ്രോയിഡ് സ്റ്റുഡിയോ/എക്‌സ് കോഡ് കോൺഫിഗർ ചെയ്‌തിരിക്കുന്ന കോർഡോവ നിങ്ങൾക്ക് ഇതിനകം തന്നെ ഉണ്ടായിരിക്കണം. ഇല്ലെങ്കിൽ, മാനുവലിൽ ക്വാസർ വെബ്‌സൈറ്റിലേക്കുള്ള ഒരു ലിങ്ക് ഉണ്ട്, അവിടെ എല്ലാം എങ്ങനെ സജ്ജീകരിക്കാമെന്ന് അവർ നിങ്ങളെ കാണിക്കുന്നു.

ടെക് സ്റ്റാക്കും സവിശേഷതകളും

• ക്വാസർ
• വ്യൂ
• കോർഡോവ
• വേവ്സർഫർ
• UI ഘടകങ്ങൾ

ചെറിയ പദ്ധതി, മൊബൈൽ ആപ്ലിക്കേഷനുകൾ സൃഷ്ടിക്കുന്നതിനുള്ള ക്വാസറിന്റെ കഴിവുകൾ പ്രകടിപ്പിക്കുന്നു.

Форма кредитной карты

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

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

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

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

ബാർ ഗ്രാഫ്

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

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

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

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

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

Анимация сердечка Twitter

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

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

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

Репозитории GitHub с функцией поиска

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

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

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

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

Чаты в стиле Reddit

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

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

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

Навигация в стиле Stripe

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

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

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

പ Pacman

Pacman-ന്റെ നിങ്ങളുടെ സ്വന്തം പതിപ്പ് സൃഷ്ടിക്കുക. ഗെയിമുകൾ എങ്ങനെ വികസിപ്പിച്ചെടുക്കുന്നു എന്നതിനെക്കുറിച്ചുള്ള ഒരു ആശയം നേടുന്നതിനും അടിസ്ഥാനകാര്യങ്ങൾ മനസ്സിലാക്കുന്നതിനുമുള്ള മികച്ച മാർഗമാണിത്. ഒരു JavaScript ഫ്രെയിംവർക്ക്, React അല്ലെങ്കിൽ Vue ഉപയോഗിക്കുക.

നീ പഠിക്കും:

• ഘടകങ്ങൾ എങ്ങനെ നീങ്ങുന്നു
• ഏത് കീകൾ അമർത്തണമെന്ന് എങ്ങനെ നിർണ്ണയിക്കും
• കൂട്ടിയിടിയുടെ നിമിഷം എങ്ങനെ നിർണ്ണയിക്കും
• നിങ്ങൾക്ക് കൂടുതൽ മുന്നോട്ട് പോയി പ്രേത ചലന നിയന്ത്രണങ്ങൾ ചേർക്കാം

ഈ പദ്ധതിയുടെ ഒരു ഉദാഹരണം നിങ്ങൾ കണ്ടെത്തും ശേഖരത്തിൽ സാമൂഹികം

ഉപയോക്തൃ മാനേജ്മെന്റ്

പദ്ധതി ശേഖരത്തിൽ സാമൂഹികം

ഉപയോക്തൃ അഡ്മിനിസ്ട്രേഷനായി ഒരു CRUD തരം ആപ്ലിക്കേഷൻ സൃഷ്ടിക്കുന്നത് വികസനത്തിന്റെ അടിസ്ഥാനകാര്യങ്ങൾ നിങ്ങളെ പഠിപ്പിക്കും. പുതിയ ഡെവലപ്പർമാർക്ക് ഇത് പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ്.

നീ പഠിക്കും:

• എന്താണ് റൂട്ടിംഗ്
• ഡാറ്റാ എൻട്രി ഫോമുകൾ എങ്ങനെ കൈകാര്യം ചെയ്യാം, ഉപയോക്താവ് എന്താണ് നൽകിയതെന്ന് പരിശോധിക്കുക
• ഡാറ്റാബേസുമായി എങ്ങനെ പ്രവർത്തിക്കാം - പ്രവർത്തനങ്ങൾ സൃഷ്ടിക്കുക, വായിക്കുക, അപ്ഡേറ്റ് ചെയ്യുക, ഇല്ലാതാക്കുക

Проверка погоды в вашем местоположении

പദ്ധതി ശേഖരത്തിൽ സാമൂഹികം

നിങ്ങൾക്ക് ആപ്പുകൾ സൃഷ്ടിക്കണമെങ്കിൽ, ഒരു കാലാവസ്ഥാ ആപ്പ് ഉപയോഗിച്ച് ആരംഭിക്കുക. സ്വിഫ്റ്റ് ഉപയോഗിച്ച് ഈ പ്രോജക്റ്റ് പൂർത്തിയാക്കാൻ കഴിയും.

ഒരു ആപ്ലിക്കേഷൻ നിർമ്മിക്കുന്നതിനുള്ള അനുഭവം നേടുന്നതിനു പുറമേ, നിങ്ങൾ പഠിക്കും:

• API ഉപയോഗിച്ച് എങ്ങനെ പ്രവർത്തിക്കാം
• ജിയോലൊക്കേഷൻ എങ്ങനെ ഉപയോഗിക്കാം
• ടെക്സ്റ്റ് ഇൻപുട്ട് ചേർത്ത് നിങ്ങളുടെ ആപ്ലിക്കേഷൻ കൂടുതൽ ചലനാത്മകമാക്കുക. അതിൽ, ഒരു പ്രത്യേക സ്ഥലത്തെ കാലാവസ്ഥ പരിശോധിക്കാൻ ഉപയോക്താക്കൾക്ക് അവരുടെ സ്ഥാനം നൽകാനാകും.

നിങ്ങൾക്ക് ഒരു API ആവശ്യമാണ്. കാലാവസ്ഥാ ഡാറ്റ ലഭിക്കാൻ, OpenWeather API ഉപയോഗിക്കുക. OpenWeather API-യെ കുറിച്ചുള്ള കൂടുതൽ വിവരങ്ങൾ ഇവിടെ.

Окно чата

എന്റെ ചാറ്റ് വിൻഡോ പ്രവർത്തനത്തിലാണ്, രണ്ട് ബ്രൗസർ ടാബുകളിൽ തുറക്കുക

സോക്കറ്റുകൾ ഉപയോഗിച്ച് ആരംഭിക്കുന്നതിനുള്ള മികച്ച മാർഗമാണ് ഒരു ചാറ്റ് വിൻഡോ സൃഷ്ടിക്കുന്നത്. ടെക് സ്റ്റാക്കിന്റെ തിരഞ്ഞെടുപ്പ് വളരെ വലുതാണ്. ഉദാഹരണത്തിന്, Node.js തികഞ്ഞതാണ്.

സോക്കറ്റുകൾ എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്നും അവ എങ്ങനെ നടപ്പിലാക്കാമെന്നും നിങ്ങൾ പഠിക്കും. ഇതാണ് ഈ പദ്ധതിയുടെ പ്രധാന നേട്ടം.

നിങ്ങൾ സോക്കറ്റുകളിൽ പ്രവർത്തിക്കാൻ ആഗ്രഹിക്കുന്ന ഒരു Laravel ഡവലപ്പർ ആണെങ്കിൽ, എന്റെ വായിക്കുക ഒരു ലേഖനം

ജിറ്റ്‌ലാബ് സി.ഐ

ഉറവിടം

നിങ്ങൾ തുടർച്ചയായ സംയോജനത്തിൽ (CI) പുതിയ ആളാണെങ്കിൽ, GitLab CI ഉപയോഗിച്ച് കളിക്കുക. കുറച്ച് പരിതസ്ഥിതികൾ സജ്ജീകരിച്ച് രണ്ട് ടെസ്റ്റുകൾ പ്രവർത്തിപ്പിക്കാൻ ശ്രമിക്കുക. ഇത് വളരെ ബുദ്ധിമുട്ടുള്ള ഒരു പ്രോജക്റ്റ് അല്ല, പക്ഷേ നിങ്ങൾ അതിൽ നിന്ന് ഒരുപാട് പഠിക്കുമെന്ന് എനിക്ക് ഉറപ്പുണ്ട്. പല വികസന ടീമുകളും ഇപ്പോൾ CI ഉപയോഗിക്കുന്നു. ഇത് എങ്ങനെ ഉപയോഗിക്കണമെന്ന് അറിയുന്നത് ഉപയോഗപ്രദമാണ്.

നീ പഠിക്കും:

• എന്താണ് GitLab CI
• എങ്ങനെ കോൺഫിഗർ ചെയ്യാം .gitlab-ci.ymlഎന്താണ് ചെയ്യേണ്ടതെന്ന് GitLab ഉപയോക്താവിനോട് ഇത് പറയുന്നു
• മറ്റ് പരിതസ്ഥിതികളിലേക്ക് എങ്ങനെ വിന്യസിക്കാം

Анализатор сайтов

വെബ്സൈറ്റുകളുടെ സെമാന്റിക്സ് വിശകലനം ചെയ്യുകയും അവയുടെ റേറ്റിംഗ് സൃഷ്ടിക്കുകയും ചെയ്യുന്ന ഒരു സ്ക്രാപ്പർ ഉണ്ടാക്കുക. ഉദാഹരണത്തിന്, ചിത്രങ്ങളിൽ ആൾട്ട് ടാഗുകൾ നഷ്‌ടപ്പെട്ടിട്ടുണ്ടോയെന്ന് നിങ്ങൾക്ക് പരിശോധിക്കാം. അല്ലെങ്കിൽ പേജിന് SEO മെറ്റാ ടാഗുകൾ ഉണ്ടോ എന്ന് പരിശോധിക്കുക. ഒരു ഉപയോക്തൃ ഇന്റർഫേസ് ഇല്ലാതെ ഒരു സ്ക്രാപ്പർ സൃഷ്ടിക്കാൻ കഴിയും.

നീ പഠിക്കും:

• സ്ക്രാപ്പർ എങ്ങനെയാണ് പ്രവർത്തിക്കുന്നത്?
• DOM സെലക്ടറുകൾ എങ്ങനെ സൃഷ്ടിക്കാം
• ഒരു അൽഗോരിതം എങ്ങനെ എഴുതാം
• നിങ്ങൾക്ക് അവിടെ നിർത്താൻ താൽപ്പര്യമില്ലെങ്കിൽ, ഒരു ഉപയോക്തൃ ഇന്റർഫേസ് സൃഷ്‌ടിക്കുക. നിങ്ങൾ പരിശോധിക്കുന്ന ഓരോ വെബ്‌സൈറ്റിലും നിങ്ങൾക്ക് ഒരു റിപ്പോർട്ട് സൃഷ്ടിക്കാനും കഴിയും.

Определение настроений в социальных сетях

ഉറവിടം

സോഷ്യൽ മീഡിയയിലെ സെന്റിമെന്റ് ഡിറ്റക്ഷൻ എന്നത് മെഷീൻ ലേണിംഗ് പരിചയപ്പെടാനുള്ള മികച്ച മാർഗമാണ്.

ഒരു സോഷ്യൽ നെറ്റ്‌വർക്ക് മാത്രം വിശകലനം ചെയ്തുകൊണ്ട് നിങ്ങൾക്ക് ആരംഭിക്കാം. എല്ലാവരും സാധാരണയായി ട്വിറ്ററിൽ തുടങ്ങുന്നു.

നിങ്ങൾക്ക് ഇതിനകം മെഷീൻ ലേണിംഗിൽ പരിചയമുണ്ടെങ്കിൽ, വ്യത്യസ്ത സോഷ്യൽ നെറ്റ്‌വർക്കുകളിൽ നിന്ന് ഡാറ്റ ശേഖരിക്കാനും അവ സംയോജിപ്പിക്കാനും ശ്രമിക്കുക.

നീ പഠിക്കും:

• എന്താണ് മെഷീൻ ലേണിംഗ്

Клон Trello

ഇന്ദ്രെക് ലാസ്നിൽ നിന്നുള്ള ട്രെല്ലോ ക്ലോൺ.

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

• അഭ്യർത്ഥന പ്രോസസ്സിംഗ് റൂട്ടുകളുടെ ഓർഗനൈസേഷൻ (റൂട്ടിംഗ്).
• വലിച്ചിടുക.
• പുതിയ വസ്തുക്കൾ (ബോർഡുകൾ, ലിസ്റ്റുകൾ, കാർഡുകൾ) എങ്ങനെ സൃഷ്ടിക്കാം.
• ഇൻപുട്ട് ഡാറ്റ പ്രോസസ്സ് ചെയ്യുകയും പരിശോധിക്കുകയും ചെയ്യുന്നു.
• ക്ലയന്റ് ഭാഗത്ത് നിന്ന്: ലോക്കൽ സ്റ്റോറേജ് എങ്ങനെ ഉപയോഗിക്കാം, ലോക്കൽ സ്റ്റോറേജിലേക്ക് ഡാറ്റ എങ്ങനെ സംരക്ഷിക്കാം, ലോക്കൽ സ്റ്റോറേജിൽ നിന്ന് ഡാറ്റ എങ്ങനെ വായിക്കാം.
• സെർവർ ഭാഗത്ത് നിന്ന്: ഡാറ്റാബേസുകൾ എങ്ങനെ ഉപയോഗിക്കാം, ഡാറ്റാബേസിൽ ഡാറ്റ എങ്ങനെ സംരക്ഷിക്കാം, ഡാറ്റാബേസിൽ നിന്ന് ഡാറ്റ എങ്ങനെ വായിക്കാം.

ഒരു സംഭരണിയുടെ ഒരു ഉദാഹരണം ഇതാ, React+Redux-ൽ നിർമ്മിച്ചത്.

Панель админа

ഗിത്തബ് ശേഖരം.

ഒരു ലളിതമായ CRUD ആപ്ലിക്കേഷൻ, അടിസ്ഥാനകാര്യങ്ങൾ പഠിക്കാൻ അനുയോജ്യമാണ്. നമുക്ക് പഠിക്കാം:

• ഉപയോക്താക്കളെ സൃഷ്ടിക്കുക, ഉപയോക്താക്കളെ നിയന്ത്രിക്കുക.
• ഡാറ്റാബേസുമായി സംവദിക്കുക - ഉപയോക്താക്കളെ സൃഷ്ടിക്കുക, വായിക്കുക, എഡിറ്റുചെയ്യുക, ഇല്ലാതാക്കുക.
• ഇൻപുട്ട് മൂല്യനിർണ്ണയം നടത്തുകയും ഫോമുകൾക്കൊപ്പം പ്രവർത്തിക്കുകയും ചെയ്യുന്നു.

Трекер криптовалют (нативное мобильное приложение)

ഗിത്തബ് ശേഖരം.

എന്തും: സ്വിഫ്റ്റ്, ഒബ്ജക്റ്റീവ്-സി, റിയാക്റ്റ് നേറ്റീവ്, ജാവ, കോട്ലിൻ.

നമുക്ക് പഠിക്കാം:

• നേറ്റീവ് ആപ്ലിക്കേഷനുകൾ എങ്ങനെ പ്രവർത്തിക്കുന്നു.
• API-ൽ നിന്ന് ഡാറ്റ എങ്ങനെ വീണ്ടെടുക്കാം.
• നേറ്റീവ് പേജ് ലേഔട്ടുകൾ എങ്ങനെ പ്രവർത്തിക്കുന്നു.
• മൊബൈൽ സിമുലേറ്ററുകൾ ഉപയോഗിച്ച് എങ്ങനെ പ്രവർത്തിക്കാം.

ഈ API പരീക്ഷിക്കുക. നിങ്ങൾ എന്തെങ്കിലും മികച്ചതായി കണ്ടെത്തുകയാണെങ്കിൽ, അഭിപ്രായങ്ങളിൽ എഴുതുക.

നിങ്ങൾക്ക് താൽപ്പര്യമുണ്ടെങ്കിൽ, അത് ഇതാ ഇതാ ഒരു ട്യൂട്ടോറിയൽ.

Настроить собственный конфиг webpack с нуля

സാങ്കേതികമായി, ഇതൊരു ആപ്ലിക്കേഷനല്ല, എന്നാൽ വെബ്‌പാക്ക് ഉള്ളിൽ നിന്ന് എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്ന് മനസിലാക്കുന്നത് വളരെ ഉപയോഗപ്രദമായ ജോലിയാണ്. ഇപ്പോൾ അത് ഒരു "ബ്ലാക്ക് ബോക്സ്" ആയിരിക്കില്ല, മറിച്ച് മനസ്സിലാക്കാവുന്ന ഒരു ഉപകരണമാണ്.

ആവശ്യകതകൾ:

• es7 മുതൽ es5 വരെ സമാഹരിക്കുക (അടിസ്ഥാനങ്ങൾ).
• jsx to js - or - .vue to .js (നിങ്ങൾ ലോഡറുകൾ പഠിക്കേണ്ടതുണ്ട്)
• വെബ്‌പാക്ക് ദേവ് സെർവറും ഹോട്ട് മൊഡ്യൂൾ റീലോഡിംഗും സജ്ജീകരിക്കുക. (vue-cli, create-react-app ഇവ രണ്ടും ഉപയോഗിക്കുന്നു)
• Heroku, now.sh അല്ലെങ്കിൽ Github ഉപയോഗിക്കുക, വെബ്‌പാക്ക് പ്രോജക്റ്റുകൾ എങ്ങനെ വിന്യസിക്കാമെന്ന് മനസിലാക്കുക.
• css - scss, കുറവ്, സ്റ്റൈലസ് കംപൈൽ ചെയ്യാൻ നിങ്ങളുടെ പ്രിയപ്പെട്ട പ്രീപ്രൊസസ്സർ സജ്ജീകരിക്കുക.
• വെബ്‌പാക്കിനൊപ്പം ചിത്രങ്ങളും svg-കളും എങ്ങനെ ഉപയോഗിക്കാമെന്ന് അറിയുക.

സമ്പൂർണ്ണ തുടക്കക്കാർക്ക് ഇത് ഒരു അത്ഭുതകരമായ വിഭവമാണ്.

Клон Hackernews

ഓരോ ജെഡിയും സ്വന്തം ഹാക്കർ ന്യൂസ് ഉണ്ടാക്കണം.

വഴിയിൽ നിങ്ങൾ എന്താണ് പഠിക്കുന്നത്:

• ഹാക്കർന്യൂസ് API-യുമായി എങ്ങനെ സംവദിക്കാം.
• ഒരൊറ്റ പേജ് ആപ്ലിക്കേഷൻ എങ്ങനെ സൃഷ്ടിക്കാം.
• അഭിപ്രായങ്ങൾ കാണുക, വ്യക്തിഗത അഭിപ്രായങ്ങൾ, പ്രൊഫൈലുകൾ എന്നിവ പോലുള്ള സവിശേഷതകൾ എങ്ങനെ നടപ്പിലാക്കാം.
• അഭ്യർത്ഥന പ്രോസസ്സിംഗ് റൂട്ടുകളുടെ ഓർഗനൈസേഷൻ (റൂട്ടിംഗ്).

Тудушечка

ടോഡോഎംവിസി.

ഗൗരവമായി? തുഡുഷ്ക? അവ ആയിരക്കണക്കിന് ഉണ്ട്. എന്നാൽ എന്നെ വിശ്വസിക്കൂ, ഈ ജനപ്രീതിക്ക് ഒരു കാരണമുണ്ട്.
നിങ്ങൾ അടിസ്ഥാനകാര്യങ്ങൾ മനസ്സിലാക്കുന്നുവെന്ന് ഉറപ്പാക്കാനുള്ള മികച്ച മാർഗമാണ് ടുഡു ആപ്പ്. ഒരു ആപ്ലിക്കേഷൻ വാനില ജാവാസ്ക്രിപ്റ്റിലും ഒന്ന് നിങ്ങളുടെ പ്രിയപ്പെട്ട ചട്ടക്കൂടിലും എഴുതാൻ ശ്രമിക്കുക.

പഠിക്കുക:

• പുതിയ ജോലികൾ സൃഷ്ടിക്കുക.
• ഫീൽഡുകൾ നിറഞ്ഞിട്ടുണ്ടോയെന്ന് പരിശോധിക്കുക.
• ഫിൽട്ടർ ടാസ്ക്കുകൾ (പൂർത്തിയായി, സജീവമാണ്, എല്ലാം). ഉപയോഗിക്കുക filter и reduce.
• ജാവാസ്ക്രിപ്റ്റിന്റെ അടിസ്ഥാനകാര്യങ്ങൾ മനസ്സിലാക്കുക.

Сортируемый drag and drop список

ഗിത്തബ് ശേഖരം.

മനസ്സിലാക്കാൻ വളരെ സഹായകരമാണ് എപിഐ വലിച്ചിടുക.

നമുക്ക് പഠിക്കാം:

• API വലിച്ചിടുക
• സമ്പന്നമായ യുഐകൾ സൃഷ്‌ടിക്കുക

Клон мессенджера (нативное приложение)

വെബ് ആപ്ലിക്കേഷനുകളും നേറ്റീവ് ആപ്ലിക്കേഷനുകളും എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്ന് നിങ്ങൾ മനസ്സിലാക്കും, ഇത് നിങ്ങളെ ഗ്രേ പിണ്ഡത്തിൽ നിന്ന് വ്യത്യസ്തമാക്കും.

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

• വെബ് സോക്കറ്റുകൾ (തൽക്ഷണ സന്ദേശങ്ങൾ)
• നേറ്റീവ് ആപ്ലിക്കേഷനുകൾ എങ്ങനെ പ്രവർത്തിക്കുന്നു.
• നേറ്റീവ് ആപ്ലിക്കേഷനുകളിൽ ടെംപ്ലേറ്റുകൾ എങ്ങനെ പ്രവർത്തിക്കുന്നു.
• നേറ്റീവ് ആപ്ലിക്കേഷനുകളിൽ അഭ്യർത്ഥന പ്രോസസ്സിംഗ് റൂട്ടുകൾ സംഘടിപ്പിക്കുന്നു.

ടെക്സ്റ്റ് എഡിറ്റർ

ഒരു ടെക്സ്റ്റ് എഡിറ്ററിന്റെ ഉദ്ദേശ്യം ഉപയോക്താക്കൾ അവരുടെ ഫോർമാറ്റിംഗ് സാധുവായ HTML മാർക്ക്അപ്പിലേക്ക് പരിവർത്തനം ചെയ്യാൻ ശ്രമിക്കുന്നത് കുറയ്ക്കുക എന്നതാണ്. ഒരു നല്ല ടെക്സ്റ്റ് എഡിറ്റർ ഉപയോക്താക്കളെ വ്യത്യസ്ത രീതികളിൽ ടെക്സ്റ്റ് ഫോർമാറ്റ് ചെയ്യാൻ അനുവദിക്കുന്നു.

ചില സമയങ്ങളിൽ, എല്ലാവരും ഒരു ടെക്സ്റ്റ് എഡിറ്റർ ഉപയോഗിച്ചു. എങ്കിൽ എന്തുകൊണ്ട് അത് സ്വയം സൃഷ്ടിക്കുക?

Клон Reddit

റെഡ്ഡിറ്റ് ഒരു സോഷ്യൽ ന്യൂസ് അഗ്രഗേഷൻ, വെബ് ഉള്ളടക്ക റേറ്റിംഗ്, ചർച്ചാ സൈറ്റ്.

റെഡ്ഡിറ്റ് എന്റെ കൂടുതൽ സമയവും എടുക്കുന്നു, പക്ഷേ ഞാൻ അതിൽ ഹാംഗ് ഔട്ട് ചെയ്യുന്നത് തുടരുന്നു. ഒരു റെഡ്ഡിറ്റ് ക്ലോൺ സൃഷ്ടിക്കുന്നത് പ്രോഗ്രാമിംഗ് പഠിക്കാനുള്ള ഒരു ഫലപ്രദമായ മാർഗമാണ് (അതേ സമയം റെഡ്ഡിറ്റ് ബ്രൗസ് ചെയ്യുമ്പോൾ).

Reddit നിങ്ങൾക്ക് വളരെ സമ്പന്നമായ ഒന്ന് നൽകുന്നു എപിഐ. ഫീച്ചറുകളൊന്നും ഉപേക്ഷിക്കുകയോ അശ്രദ്ധമായി കാര്യങ്ങൾ ചെയ്യുകയോ ചെയ്യരുത്. ക്ലയന്റുകളുമായും ഉപഭോക്താക്കളുമായും ഉള്ള യഥാർത്ഥ ലോകത്ത്, നിങ്ങൾക്ക് അശ്രദ്ധമായി പ്രവർത്തിക്കാൻ കഴിയില്ല, അല്ലെങ്കിൽ നിങ്ങളുടെ ജോലി പെട്ടെന്ന് നഷ്ടപ്പെടും.

ജോലി മോശമായി നടക്കുന്നുണ്ടെന്ന് സ്മാർട്ട് ക്ലയന്റുകൾ ഉടൻ മനസ്സിലാക്കുകയും മറ്റൊരാളെ കണ്ടെത്തുകയും ചെയ്യും.

Reddit API

Публикация пакета NPM с открытым исходным кодом

നിങ്ങൾ Javascript കോഡ് എഴുതുകയാണെങ്കിൽ, നിങ്ങൾ ഒരു പാക്കേജ് മാനേജർ ഉപയോഗിക്കാനുള്ള സാധ്യതയുണ്ട്. മറ്റ് ആളുകൾ എഴുതിയതും പ്രസിദ്ധീകരിച്ചതുമായ നിലവിലുള്ള കോഡ് വീണ്ടും ഉപയോഗിക്കാൻ ഒരു പാക്കേജ് മാനേജർ നിങ്ങളെ അനുവദിക്കുന്നു.

ഒരു പാക്കേജിന്റെ പൂർണ്ണ വികസന ചക്രം മനസ്സിലാക്കുന്നത് വളരെ നല്ല അനുഭവം നൽകും. കോഡ് പ്രസിദ്ധീകരിക്കുമ്പോൾ നിങ്ങൾ അറിഞ്ഞിരിക്കേണ്ട നിരവധി കാര്യങ്ങളുണ്ട്. സുരക്ഷ, സെമാന്റിക് പതിപ്പിംഗ്, സ്കേലബിലിറ്റി, പേരിടൽ കൺവെൻഷനുകൾ, പരിപാലനം എന്നിവയെക്കുറിച്ച് നിങ്ങൾ ചിന്തിക്കേണ്ടതുണ്ട്.

പാക്കേജ് എന്തും ആകാം. നിങ്ങൾക്ക് ഒരു ആശയം ഇല്ലെങ്കിൽ, നിങ്ങളുടേതായ Lodash സൃഷ്ടിച്ച് അത് പ്രസിദ്ധീകരിക്കുക.

ലോഡ്ഷ്: lodash.com

നിങ്ങൾ ഓൺലൈനിൽ എന്തെങ്കിലും ചെയ്‌തത് നിങ്ങളെ മറ്റുള്ളവരെക്കാൾ 10% ഉയർത്തുന്നു. ഉപയോഗപ്രദമായ ചില ഉറവിടങ്ങൾ ഇതാ ഓപ്പൺ സോഴ്സുകളെയും പാക്കേജുകളെയും കുറിച്ച്.

Учебный план freeCodeCamp

FCC പാഠ്യപദ്ധതി

freeCodecamp ധാരാളം ശേഖരിച്ചു സമഗ്ര പ്രോഗ്രാമിംഗ് കോഴ്സ്.

freeCodeCamp ഒരു ലാഭേച്ഛയില്ലാത്ത സ്ഥാപനമാണ്. ഇന്ററാക്ടീവ് വെബ് അധിഷ്‌ഠിത പഠന പ്ലാറ്റ്‌ഫോം, ഒരു ഓൺലൈൻ കമ്മ്യൂണിറ്റി ഫോറം, ചാറ്റ് റൂമുകൾ, മീഡിയം പ്രസിദ്ധീകരണങ്ങൾ, എല്ലാവർക്കുമായി പഠന വെബ് വികസനം ആക്‌സസ് ചെയ്യാൻ ഉദ്ദേശിക്കുന്ന പ്രാദേശിക ഓർഗനൈസേഷനുകൾ എന്നിവ ഇതിൽ ഉൾപ്പെടുന്നു.

മുഴുവൻ കോഴ്‌സും പൂർത്തിയാക്കാൻ നിങ്ങൾക്ക് കഴിഞ്ഞാൽ നിങ്ങളുടെ ആദ്യ ജോലിക്ക് നിങ്ങൾ കൂടുതൽ യോഗ്യത നേടും.

Создайте HTTP-сервер с нуля

ഇന്റർനെറ്റിൽ ഉള്ളടക്കം സഞ്ചരിക്കുന്ന പ്രധാന പ്രോട്ടോക്കോളുകളിൽ ഒന്നാണ് HTTP പ്രോട്ടോക്കോൾ. HTML, CSS, JS എന്നിവ പോലുള്ള സ്റ്റാറ്റിക് ഉള്ളടക്കം നൽകുന്നതിന് HTTP സെർവറുകൾ ഉപയോഗിക്കുന്നു.

ആദ്യം മുതൽ HTTP പ്രോട്ടോക്കോൾ നടപ്പിലാക്കാൻ കഴിയുന്നത് കാര്യങ്ങൾ എങ്ങനെ ഇടപെടുന്നു എന്നതിനെക്കുറിച്ചുള്ള നിങ്ങളുടെ അറിവ് വർദ്ധിപ്പിക്കും.

ഉദാഹരണത്തിന്, നിങ്ങൾ NodeJs ഉപയോഗിക്കുകയാണെങ്കിൽ, Express ഒരു HTTP സെർവർ നൽകുന്നുവെന്ന് നിങ്ങൾക്കറിയാം.

റഫറൻസിനായി, നിങ്ങൾക്ക് കഴിയുമോയെന്ന് കാണുക:

• ലൈബ്രറികളൊന്നും ഉപയോഗിക്കാതെ ഒരു സെർവർ സജ്ജീകരിക്കുക
• സെർവർ HTML, CSS, JS ഉള്ളടക്കം നൽകണം.
• ആദ്യം മുതൽ ഒരു റൂട്ടർ നടപ്പിലാക്കുന്നു
• മാറ്റങ്ങൾ നിരീക്ഷിച്ച് സെർവർ അപ്ഡേറ്റ് ചെയ്യുക

എന്തുകൊണ്ടെന്ന് നിങ്ങൾക്കറിയില്ലെങ്കിൽ, ഉപയോഗിക്കുക പോകൂ കൂടാതെ ഒരു HTTP സെർവർ സൃഷ്ടിക്കാൻ ശ്രമിക്കുക കാഡി ആദ്യം മുതൽ.

Десктопное приложение для заметок

നാമെല്ലാവരും കുറിപ്പുകൾ എടുക്കുന്നു, അല്ലേ?

നമുക്ക് ഒരു നോട്ട്സ് ആപ്പ് ഉണ്ടാക്കാം. അപ്ലിക്കേഷന് കുറിപ്പുകൾ സംരക്ഷിച്ച് ഡാറ്റാബേസുമായി സമന്വയിപ്പിക്കേണ്ടതുണ്ട്. ഇലക്‌ട്രോൺ, സ്വിഫ്റ്റ്, അല്ലെങ്കിൽ നിങ്ങൾക്ക് ഇഷ്ടമുള്ളതും നിങ്ങളുടെ സിസ്റ്റത്തിന് വേണ്ടി പ്രവർത്തിക്കുന്നതും ഉപയോഗിച്ച് ഒരു നേറ്റീവ് ആപ്പ് നിർമ്മിക്കുക.

ഇത് ആദ്യ വെല്ലുവിളിയുമായി (ടെക്‌സ്റ്റ് എഡിറ്റർ) സംയോജിപ്പിക്കാൻ മടിക്കേണ്ടതില്ല.

ഒരു ബോണസ് എന്ന നിലയിൽ, നിങ്ങളുടെ ഡെസ്ക്ടോപ്പ് പതിപ്പ് വെബ് പതിപ്പുമായി സമന്വയിപ്പിക്കാൻ ശ്രമിക്കുക.

Подкасты (клон Overcast)

ആരാണ് പോഡ്‌കാസ്റ്റുകൾ കേൾക്കാത്തത്?

ഇനിപ്പറയുന്ന പ്രവർത്തനക്ഷമതയുള്ള ഒരു വെബ് ആപ്ലിക്കേഷൻ സൃഷ്ടിക്കുക:

• ഒരു ഇടപാട് തുടങ്ങു
• പോഡ്‌കാസ്റ്റുകൾ തിരയുക
• പോഡ്‌കാസ്റ്റുകൾ റേറ്റുചെയ്‌ത് സബ്‌സ്‌ക്രൈബുചെയ്യുക
• 30 സെക്കൻഡ് നേരത്തേക്ക് നിർത്തി കളിക്കുക, വേഗത മാറ്റുക, മുന്നോട്ടും പിന്നോട്ടും ഫംഗ്‌ഷനുകൾ മാറ്റുക.

ഒരു ആരംഭ പോയിന്റായി iTunes API ഉപയോഗിക്കാൻ ശ്രമിക്കുക. നിങ്ങൾക്ക് മറ്റെന്തെങ്കിലും ഉറവിടങ്ങൾ അറിയാമെങ്കിൽ, ദയവായി അഭിപ്രായങ്ങളിൽ പോസ്റ്റുചെയ്യുക.

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

സ്ക്രീൻ ക്യാപ്ചർ

ഹലോ! ഞാൻ ഇപ്പോൾ എന്റെ സ്‌ക്രീൻ ചിത്രീകരിക്കുകയാണ്!

നിങ്ങളുടെ സ്‌ക്രീൻ ക്യാപ്‌ചർ ചെയ്യാനും ക്ലിപ്പ് ഇതുപോലെ സംരക്ഷിക്കാനും നിങ്ങളെ അനുവദിക്കുന്ന ഒരു ഡെസ്‌ക്‌ടോപ്പ് അല്ലെങ്കിൽ വെബ് ആപ്പ് സൃഷ്‌ടിക്കുക .gif

ഇവിടെ ചില നുറുങ്ങുകൾഇത് എങ്ങനെ നേടാം.

ഉറവിടങ്ങൾ

• ഡെവലപ്പർക്കായി 5 ധൈര്യശാലികളായ പരിശീലന പദ്ധതികൾ (ലെയർ, സ്ക്വോഷ്, കാൽക്കുലേറ്റർ, വെബ്‌സൈറ്റ് ക്രാളർ, മ്യൂസിക് പ്ലെയർ)
• നിങ്ങളുടെ ഫ്രണ്ട്-എൻഡ് കഴിവുകൾ വികസിപ്പിക്കുന്നതിനുള്ള 9 പ്രോജക്ടുകൾ
• ഒരു ഫ്രണ്ട്-എൻഡ് ഡെവലപ്പർക്കുള്ള ആറ് ടാസ്‌ക്കുകൾ
• ഒരു ഡവലപ്പർക്കുള്ള രസകരമായ പരിശീലനം
• 8 വിദ്യാഭ്യാസ പദ്ധതികൾ
• പ്രാക്ടീസ് ചെയ്യേണ്ട പ്രോജക്റ്റുകളുടെ മറ്റൊരു ലിസ്റ്റ്

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