1. Клон Notion
Приложение Notion полюбилось многим, оно позволяет оптимизировать рабочий процесс, работать с документами, планировать задачи, синхронизировать данные между устройствами.
Чему вы научитесь, создавая клон Notion:
- . Пользователь может «схватить мышкой» 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
конвертирует видео в GIF используя функции для эффективных палитр кросс-кадров и временного сглаживания. В результате получается гифка с тысячами цветов на кадр.
Чему вы научитесь, создавая клон Gifski:
- Как конвертировать видео файлы (.mp4 в .gif).
- Как использовать API Drag and Drop HTML.
- Как работают оптимизация и обработка изображений.
ઉદાહરણ: и есть на GitHub!
5. Мониторинг курсов криптовалют
React Native cryptocurrency tracker
Чему вы научитесь, создавая трекер курса валют:
- Как работать с API и получать данные удаленно из API.
- Как отобразить данные в виде списка.
- બોનસ: Если вам интересно, я недавно написал на криптовалюту с React Native.
ઉદાહરણ: અહીં .
Подборка проектов из предыдущих публикаций.
સ્તર બદલવા માટે
સ્તર એ એક સમુદાય છે જ્યાં દરેક વ્યક્તિ વહેંચાયેલ "બોર્ડ" પર પિક્સેલ દોરી શકે છે. મૂળ વિચારનો જન્મ Reddit પર થયો હતો. આર/લેયર સમુદાય એ વહેંચાયેલ સર્જનાત્મકતાનું રૂપક છે, કે દરેક વ્યક્તિ સર્જક બની શકે છે અને એક સામાન્ય હેતુમાં યોગદાન આપી શકે છે.
તમારો પોતાનો લેયર પ્રોજેક્ટ બનાવતી વખતે તમે શું શીખશો:
- JavaScript કેનવાસ કેવી રીતે કામ કરે છે કેનવાસને કેવી રીતે ઓપરેટ કરવું તે જાણવું એ ઘણી એપ્લિકેશન્સમાં એક મહત્વપૂર્ણ કૌશલ્ય છે.
- વપરાશકર્તા પરવાનગીઓનું સંકલન કેવી રીતે કરવું. દરેક વપરાશકર્તા લોગ ઇન કર્યા વિના દર 15 મિનિટે એક પિક્સેલ દોરી શકે છે.
- કૂકી સત્રો બનાવો.
Squoosh
સ્ક્વોશ એ ઘણા અદ્યતન વિકલ્પો સાથે ઇમેજ કમ્પ્રેશન એપ્લિકેશન છે.
GIF 20 MB
સ્ક્વોશનું તમારું પોતાનું સંસ્કરણ બનાવીને તમે શીખી શકશો:
- છબીના કદ સાથે કેવી રીતે કામ કરવું
- Drag'n'Drop API ની મૂળભૂત બાબતો જાણો
- API અને ઇવેન્ટ શ્રોતાઓ કેવી રીતે કાર્ય કરે છે તે સમજો
- ફાઇલો કેવી રીતે અપલોડ કરવી અને નિકાસ કરવી
ઉદાહરણ: ઇમેજ કોમ્પ્રેસર સ્થાનિક છે. સર્વર પર વધારાનો ડેટા મોકલવો જરૂરી નથી. તમારી પાસે ઘરે કોમ્પ્રેસર હોઈ શકે છે, અથવા તમે તમારી પસંદગીના સર્વર પર તેનો ઉપયોગ કરી શકો છો.
કેલ્ક્યુલેટર
ચલ? ગંભીરતાથી? કેલ્ક્યુલેટર? હા, બરાબર, એક કેલ્ક્યુલેટર. ગણિતની કામગીરીની મૂળભૂત બાબતો અને તેઓ કેવી રીતે એકસાથે કામ કરે છે તે સમજવું એ તમારી એપ્લિકેશનને સરળ બનાવવા માટે એક મહત્વપૂર્ણ કૌશલ્ય છે. વહેલા કે પછી તમારે સંખ્યાઓ સાથે વ્યવહાર કરવો પડશે અને વહેલા તે વધુ સારું.
તમારું પોતાનું કેલ્ક્યુલેટર બનાવીને તમે શીખી શકશો:
- સંખ્યાઓ અને ગણિતની ક્રિયાઓ સાથે કામ કરો
- ઇવેન્ટ લિસનર્સ API સાથે પ્રેક્ટિસ કરો
- તત્વો કેવી રીતે ગોઠવવા, શૈલીઓ સમજવી
ક્રાઉલર (સર્ચ એન્જિન)
દરેક વ્યક્તિએ સર્ચ એન્જિનનો ઉપયોગ કર્યો છે, તો શા માટે તમારું પોતાનું બનાવશો નહીં? માહિતી શોધવા માટે ક્રોલર્સની જરૂર છે. દરેક વ્યક્તિ દરરોજ તેનો ઉપયોગ કરે છે અને આ ટેક્નોલોજી અને નિષ્ણાતોની માંગ માત્ર સમય જતાં વધશે.
ગૂગલ સર્ચ એન્જિન
તમારું પોતાનું સર્ચ એન્જિન બનાવીને તમે શું શીખી શકશો:
- ક્રોલર્સ કેવી રીતે કામ કરે છે
- સાઇટ્સને કેવી રીતે અનુક્રમિત કરવી અને રેટિંગ અને પ્રતિષ્ઠા દ્વારા તેમને કેવી રીતે ક્રમાંકિત કરવી
- ડેટાબેઝમાં અનુક્રમિત સાઇટ્સ કેવી રીતે સંગ્રહિત કરવી અને ડેટાબેઝ સાથે કેવી રીતે કાર્ય કરવું
મ્યુઝિક પ્લેયર (Spotify, Apple Music)
દરેક વ્યક્તિ સંગીત સાંભળે છે - તે આપણા જીવનનો માત્ર એક અભિન્ન ભાગ છે. આધુનિક મ્યુઝિક સ્ટ્રીમિંગ પ્લેટફોર્મના મૂળભૂત મિકેનિક્સ કેવી રીતે કાર્ય કરે છે તે વધુ સારી રીતે સમજવા માટે ચાલો એક મ્યુઝિક પ્લેયર બનાવીએ.
Spotify
તમારું પોતાનું મ્યુઝિક સ્ટ્રીમિંગ પ્લેટફોર્મ બનાવીને તમે શું શીખી શકશો:
- API સાથે કેવી રીતે કામ કરવું. Spotify અથવા Apple Music માંથી API નો ઉપયોગ કરો
- આગલા/પાછલા ટ્રેક પર કેવી રીતે રમવું, થોભાવવું અથવા રીવાઇન્ડ કરવું
- વોલ્યુમ કેવી રીતે બદલવું
- વપરાશકર્તા રૂટીંગ અને બ્રાઉઝર ઇતિહાસનું સંચાલન કેવી રીતે કરવું
પ્રતિક્રિયા સાથે મૂવી શોધ એપ્લિકેશન (હુક્સ સાથે)
તમે જે પ્રથમ વસ્તુ સાથે પ્રારંભ કરી શકો છો તે છે પ્રતિક્રિયા સાથે મૂવી શોધ એપ્લિકેશન બનાવવી. અંતિમ એપ્લિકેશન કેવી દેખાશે તેની નીચે એક છબી છે:
તમે શું શીખીશું
આ એપ્લિકેશન બનાવીને, તમે પ્રમાણમાં નવા Hooks API નો ઉપયોગ કરીને તમારી પ્રતિક્રિયા કૌશલ્યમાં સુધારો કરશો. નમૂના પ્રોજેક્ટ પ્રતિક્રિયા ઘટકો, ઘણાં બધાં હૂક, એક બાહ્ય API અને અલબત્ત કેટલીક CSS સ્ટાઇલનો ઉપયોગ કરે છે.
ટેક સ્ટેક અને લક્ષણો
- હુક્સ સાથે પ્રતિક્રિયા આપો
- બનાવો-પ્રતિક્રિયા-એપ્લિકેશન
- જેએસએક્સ
- સીએસએસ
કોઈપણ વર્ગોનો ઉપયોગ કર્યા વિના, આ પ્રોજેક્ટ્સ તમને કાર્યાત્મક પ્રતિક્રિયામાં સંપૂર્ણ પ્રવેશ બિંદુ આપે છે અને 2020 માં ચોક્કસપણે તમને મદદ કરશે. તમે શોધી શકો છો . સૂચનાઓને અનુસરો અથવા તેને તમારી પોતાની બનાવો.
Vue સાથે ચેટ એપ્લિકેશન
તમારા માટે અન્ય એક મહાન પ્રોજેક્ટ મારી મનપસંદ JavaScript લાઇબ્રેરીનો ઉપયોગ કરીને ચેટ એપ્લિકેશન બનાવવાનો છે: VueJS. એપ્લિકેશન આના જેવી દેખાશે:
તમે શું શીખીશું
આ ટ્યુટોરીયલમાં, તમે શરૂઆતથી Vue એપ્લિકેશન કેવી રીતે બનાવવી તે શીખી શકશો - ઘટકો બનાવો, સ્ટેટ્સ હેન્ડલ કરો, રૂટ્સ બનાવો, તૃતીય-પક્ષ સેવાઓ સાથે કનેક્ટ કરો અને પ્રમાણીકરણને પણ હેન્ડલ કરો.
ટેક સ્ટેક અને લક્ષણો
- વ્યુ
- vuex
- Vue રાઉટર
- Vue CLI
- પુશેર
- સીએસએસ
Vue સાથે પ્રારંભ કરવા અથવા 2020 માં વિકાસમાં જવા માટે તમારી હાલની કુશળતા સુધારવા માટે આ ખરેખર એક મહાન પ્રોજેક્ટ છે. તમે શોધી શકો છો .
કોણીય 8 સાથે સુંદર હવામાન એપ્લિકેશન
આ ઉદાહરણ તમને કોણીય 8 નો ઉપયોગ કરીને સુંદર હવામાન એપ્લિકેશન બનાવવામાં મદદ કરશે:
તમે શું શીખીશું
આ પ્રોજેક્ટ તમને શરૂઆતથી એપ્લીકેશન બનાવવા માટે મૂલ્યવાન કૌશલ્યો શીખવશે - ડિઝાઇનથી ડેવલપમેન્ટ સુધી, દરેક રીતે તૈયાર-થી-જમાવટ એપ્લિકેશન સુધી.
ટેક સ્ટેક અને લક્ષણો
- કોણીય 8
- ફાયરબેઝ
- સર્વર સાઇડ રેન્ડરીંગ
- ગ્રીડ અને ફ્લેક્સબોક્સ સાથે CSS
- મોબાઇલ મૈત્રીપૂર્ણ અને અનુકૂલનક્ષમતા
- ડાર્ક મોડ
- સુંદર ઈન્ટરફેસ
આ વ્યાપક પ્રોજેક્ટ વિશે મને ખરેખર જે ગમે છે તે એ છે કે તમે એકલતામાં વસ્તુઓનો અભ્યાસ કરતા નથી. તેના બદલે, તમે ડિઝાઇનથી અંતિમ જમાવટ સુધીની સમગ્ર વિકાસ પ્રક્રિયા શીખો.
Svelte સાથે ટુ-ડૂ એપ્લિકેશન
સ્વેલ્ટ એ ઘટક અભિગમમાં નવા બાળક જેવું છે - ઓછામાં ઓછું પ્રતિક્રિયા, Vue અને કોણીય જેવું જ છે. અને આ 2020 માટે સૌથી ગરમ નવા ઉત્પાદનોમાંનું એક છે.
ટૂ-ડૂ એપ્લિકેશન્સ એ સૌથી ગરમ વિષય હોય તે જરૂરી નથી, પરંતુ તે ખરેખર તમારી સ્વેલ્ટ કુશળતાને સુધારવામાં મદદ કરશે. તે આના જેવો દેખાશે:
તમે શું શીખીશું
આ ટ્યુટોરીયલ તમને બતાવશે કે Svelte 3 સાથે એપ્લિકેશન કેવી રીતે બનાવવી, શરૂઆતથી અંત સુધી. તમે ઘટકો, સ્ટાઇલ અને ઇવેન્ટ હેન્ડલર્સનો ઉપયોગ કરશો
ટેક સ્ટેક અને લક્ષણો
- સ્વેલ્ટ 3
- ઘટકો
- CSS સાથે સ્ટાઇલ
- સિન્ટેક્સ ES6
ત્યાં ઘણા સારા Svelte સ્ટાર્ટર પ્રોજેક્ટ નથી, તેથી મને મળી .
Next.js સાથે ઈકોમર્સ એપ્લિકેશન
Next.js એ રિએક્ટ એપ્સ બનાવવા માટેનું સૌથી લોકપ્રિય માળખું છે જે સર્વર-સાઇડ રેન્ડરિંગને બૉક્સની બહાર સપોર્ટ કરે છે.
આ પ્રોજેક્ટ તમને બતાવશે કે ઈ-કોમર્સ એપ્લિકેશન કેવી રીતે બનાવવી જે આના જેવી લાગે છે:
તમે શું શીખીશું
આ પ્રોજેક્ટમાં, તમે Next.js સાથે કેવી રીતે વિકાસ કરવો તે શીખી શકશો—નવા પૃષ્ઠો અને ઘટકો બનાવો, ડેટા પુનઃપ્રાપ્ત કરો અને શૈલી અને નેક્સ્ટ એપ્લિકેશનનો ઉપયોગ કરો.
ટેક સ્ટેક અને લક્ષણો
- Next.js
- ઘટકો અને પૃષ્ઠો
- ડેટા સેમ્પલિંગ
- શૈલીકરણ
- પ્રોજેક્ટ જમાવટ
- SSR અને SPA
કંઈક નવું શીખવા માટે ઈ-કૉમર્સ ઍપ જેવું વાસ્તવિક જીવનનું ઉદાહરણ હોવું હંમેશા ઉત્તમ છે. તમે કરી શકો છો .
Nuxt.js સાથે સંપૂર્ણ બહુભાષી બ્લોગ
Nuxt.js Vue માટે છે, જેમ કે Next.js રિએક્ટ માટે છે: સર્વર-સાઇડ રેન્ડરિંગ અને સિંગલ-પેજ એપ્લીકેશનને સંયોજિત કરવા માટે એક સરસ માળખું
તમે જે છેલ્લી એપ્લિકેશન બનાવી શકો છો તે આના જેવી દેખાશે:
તમે શું શીખીશું
આ નમૂના પ્રોજેક્ટમાં, તમે પ્રારંભિક સેટઅપથી અંતિમ જમાવટ સુધી, Nuxt.js નો ઉપયોગ કરીને સંપૂર્ણ વેબસાઇટ કેવી રીતે બનાવવી તે શીખી શકશો.
તે ઘણી બધી શાનદાર સુવિધાઓનો લાભ લે છે જે Nuxt ઓફર કરે છે, જેમ કે પૃષ્ઠો અને ઘટકો અને SCSS સાથે સ્ટાઇલ.
ટેક સ્ટેક અને લક્ષણો
- ન્યુક્સ્ટ.જેએસ
- ઘટકો અને પૃષ્ઠો
- સ્ટોરીબ્લોક મોડ્યુલ
- મિક્સિન્સ
- રાજ્ય વ્યવસ્થાપન માટે Vuex
- સ્ટાઇલ માટે SCSS
- Nuxt મિડલવેર
, જેમાં Nuxt.js ની ઘણી મહાન સુવિધાઓનો સમાવેશ થાય છે. મને અંગત રીતે Nuxt સાથે કામ કરવાનું પસંદ છે તેથી તમારે તેને અજમાવી જુઓ કારણ કે તે તમને એક મહાન Vue ડેવલપર પણ બનાવશે.
ગેટ્સબી સાથે બ્લોગ
ગેટ્સબી એ રીએક્ટ અને ગ્રાફક્યુએલનો ઉપયોગ કરીને એક ઉત્તમ સ્ટેટિક સાઇટ જનરેટર છે. આ પ્રોજેક્ટનું પરિણામ છે:
તમે શું શીખીશું
આ ટ્યુટોરીયલમાં, તમે ગેટ્સબીનો ઉપયોગ બ્લોગ બનાવવા માટે કેવી રીતે કરવો તે શીખીશું જેનો ઉપયોગ તમે React અને GraphQL નો ઉપયોગ કરીને તમારા પોતાના લેખો લખવા માટે કરશો.
ટેક સ્ટેક અને લક્ષણો
- ગેટ્સબી
- પ્રતિક્રિયા
- ગ્રાફક્યુએલ
- પ્લગઇન્સ અને થીમ્સ
- MDX/માર્કડાઉન
- બુટસ્ટ્રેપ CSS
- દાખલાઓ
જો તમે ક્યારેય બ્લોગ શરૂ કરવા માંગતા હો, React અને GraphQL નો ઉપયોગ કરીને તેને કેવી રીતે બનાવવું.
હું એમ નથી કહેતો કે વર્ડપ્રેસ એ ખરાબ પસંદગી છે, પરંતુ ગેટ્સબી સાથે તમે રિએક્ટનો ઉપયોગ કરીને ઉચ્ચ પ્રદર્શન વેબસાઇટ્સ બનાવી શકો છો - જે એક અદ્ભુત સંયોજન છે.
Gridsome સાથે બ્લોગ
Vue માટે ગ્રિડસમ... ઠીક છે, અમારી પાસે તે પહેલાથી જ નેક્સ્ટ/નક્સ્ટ સાથે હતું.
પરંતુ તે જ ગ્રિડસમ અને ગેટ્સબી માટે સાચું છે. બંને તેમના ડેટા સ્તર તરીકે GraphQL નો ઉપયોગ કરે છે, પરંતુ Gridsome VueJS નો ઉપયોગ કરે છે. તે એક અદ્ભુત સ્થિર સાઇટ જનરેટર પણ છે જે તમને ઉત્તમ બ્લોગ્સ બનાવવામાં મદદ કરે છે:
તમે શું શીખીશું
આ પ્રોજેક્ટ તમને શીખવશે કે Gridsome, GraphQL અને Markdown સાથે પ્રારંભ કરવા માટે એક સરળ બ્લોગ કેવી રીતે બનાવવો. તે Netlify દ્વારા એપ્લિકેશન કેવી રીતે જમાવવી તે પણ સમજાવે છે.
ટેક સ્ટેક અને લક્ષણો
- ગ્રિડસમ
- વ્યુ
- ગ્રાફક્યુએલ
- માર્કડાઉન
- નેટલાઈફ કરો
આ ચોક્કસપણે સૌથી સંપૂર્ણ ટ્યુટોરીયલ નથી, પરંતુ તે ગ્રિડસમ અને ની મૂળભૂત વિભાવનાઓને આવરી લે છે .
Quasar નો ઉપયોગ કરીને SoundCloud જેવું જ ઓડિયો પ્લેયર
ક્વાસર એ અન્ય Vue ફ્રેમવર્ક છે જેનો ઉપયોગ મોબાઇલ એપ્સ બનાવવા માટે થઈ શકે છે. આ પ્રોજેક્ટમાં, તમે ઑડિઓ પ્લેયર એપ્લિકેશન બનાવશો, ઉદાહરણ તરીકે:
તમે શું શીખીશું
જ્યારે અન્ય પ્રોજેક્ટ્સ મોટાભાગે વેબ એપ્સ પર ધ્યાન કેન્દ્રિત કરે છે, ત્યારે આ તમને બતાવશે કે Vue અને Quasar ફ્રેમવર્કનો ઉપયોગ કરીને મોબાઇલ એપ્લિકેશન કેવી રીતે બનાવવી.
તમારી પાસે એન્ડ્રોઇડ સ્ટુડિયો/એક્સકોડ સેટઅપ સાથે વર્કિંગ કોર્ડોવા પહેલેથી જ હોવું જોઈએ. જો નહિં, તો મેન્યુઅલમાં Quasar વેબસાઇટની લિંક છે જ્યાં તેઓ તમને બધું કેવી રીતે સેટ કરવું તે બતાવે છે.
ટેક સ્ટેક અને લક્ષણો
- ક્વાસર
- વ્યુ
- કોર્ડોવા
- વેવસર્ફર
- UI ઘટકો
, મોબાઇલ એપ્લીકેશન બનાવવા માટે ક્વાસારની ક્ષમતાઓનું નિદર્શન.
Форма кредитной карты
સરળ અને આનંદપ્રદ સૂક્ષ્મ ક્રિયાપ્રતિક્રિયાઓ સાથે એક સરસ ક્રેડિટ કાર્ડ આકાર. નંબર ફોર્મેટિંગ, વેરિફિકેશન અને ઓટોમેટિક કાર્ડ પ્રકાર ડિટેક્શનનો સમાવેશ થાય છે. તે Vue.js પર બનેલ છે અને તે પણ સંપૂર્ણપણે જવાબદાર છે. (તમે જોઈ શકો છો .)
તમે શું શીખી શકશો:
- પ્રક્રિયા કરો અને ફોર્મ માન્ય કરો
- ઇવેન્ટ્સ હેન્ડલ કરો (ઉદાહરણ તરીકે, જ્યારે ફીલ્ડ બદલાય છે)
- પેજ પર તત્વો કેવી રીતે પ્રદર્શિત કરવા અને મૂકવા તે સમજો, ખાસ કરીને ફોર્મની ટોચ પર દેખાતી ક્રેડિટ કાર્ડ માહિતી
બાર ગ્રાફ
હિસ્ટોગ્રામ એ એક ચાર્ટ અથવા આલેખ છે જે તેઓ રજૂ કરે છે તે મૂલ્યોના પ્રમાણસર ઊંચાઈ અથવા લંબાઈ સાથે લંબચોરસ બાર સાથે વર્ગીકૃત ડેટાનું પ્રતિનિધિત્વ કરે છે.
તેઓ ઊભી અથવા આડી રીતે લાગુ કરી શકાય છે. વર્ટિકલ બાર ચાર્ટને ક્યારેક લાઇન ચાર્ટ કહેવામાં આવે છે.
તમે શું શીખી શકશો:
- સંરચિત અને સમજી શકાય તેવી રીતે ડેટા પ્રદર્શિત કરો
- વધારામાં: તત્વનો ઉપયોગ કેવી રીતે કરવો તે જાણો
canvasઅને તેની સાથે તત્વો કેવી રીતે દોરવા
તમે વિશ્વની વસ્તી ડેટા શોધી શકો છો. તેઓ વર્ષ દ્વારા વર્ગીકૃત થયેલ છે.
Анимация сердечка Twitter
2016 માં, ટ્વિટરે તેની ટ્વીટ્સ માટે આ અદ્ભુત એનિમેશન રજૂ કર્યું હતું. 2019 સુધી, તે હજી પણ ભાગ દેખાય છે, તો શા માટે એક જાતે બનાવશો નહીં?
તમે શું શીખી શકશો:
- CSS વિશેષતા સાથે કામ કરો
keyframes - HTML ઘટકોને હેરફેર અને એનિમેટ કરો
- JavaScript, HTML અને CSS ને જોડો
Репозитории GitHub с функцией поиска
અહીં કંઈપણ ફેન્સી નથી — GitHub રેપો માત્ર એક ગૌરવપૂર્ણ સૂચિ છે.
ધ્યેય રીપોઝીટરીઝ પ્રદર્શિત કરવાનો છે અને વપરાશકર્તાને તેમને ફિલ્ટર કરવાની મંજૂરી આપે છે. વાપરવુ દરેક વપરાશકર્તા માટે રીપોઝીટરીઝ મેળવવા માટે.
GitHub પ્રોફાઇલ પૃષ્ઠ -
તમે શું શીખી શકશો:
- API માંથી ડેટા મેળવો
- API માંથી ડેટા દર્શાવો
- ફિલ્ટર કરો અને દરેક શોધ માટે સંબંધિત ડેટા બતાવો
- વૈકલ્પિક: જો તમે પડકાર માટે તૈયાર છો, તો ઉપયોગ કરો , GraphQL નો ઉપયોગ કરીને બનેલ. .
Чаты в стиле Reddit
તેમની સાદગી અને ઉપયોગમાં સરળતાને કારણે ચેટ્સ એ સંચારની લોકપ્રિય રીત છે. પરંતુ આધુનિક ચેટ રૂમને ખરેખર શું ઇંધણ આપે છે? વેબસોકેટ્સ!
તમે શું શીખી શકશો:
- વેબસોકેટ્સ, રીઅલ-ટાઇમ કોમ્યુનિકેશન અને ડેટા અપડેટ્સનો ઉપયોગ કરો
- વપરાશકર્તા ઍક્સેસ સ્તરો સાથે કામ કરો (ઉદાહરણ તરીકે, ચેટ ચેનલના માલિકની ભૂમિકા છે
admin, અને રૂમમાં અન્ય -user) - પ્રક્રિયા કરો અને ફોર્મ માન્ય કરો - યાદ રાખો, સંદેશ મોકલવા માટેની ચેટ વિન્ડો છે
input - વિવિધ ચેટ્સ બનાવો અને તેમાં જોડાઓ
- વ્યક્તિગત સંદેશાઓ સાથે કામ કરો. વપરાશકર્તાઓ અન્ય વપરાશકર્તાઓ સાથે ખાનગી રીતે ચેટ કરી શકે છે. આવશ્યકપણે, તમે બે વપરાશકર્તાઓ વચ્ચે વેબસોકેટ કનેક્શન સ્થાપિત કરશો.
Навигация в стиле Stripe
જે આ નેવિગેશનને અનન્ય બનાવે છે તે એ છે કે પોપઓવર કન્ટેનર સામગ્રીને ફિટ કરવા માટે પરિવર્તિત થાય છે. નવા પોપઓવરને ખોલવા અને બંધ કરવાના પરંપરાગત વર્તનની તુલનામાં આ સંક્રમણમાં લાવણ્ય છે.
તમે શું શીખી શકશો:
- સંક્રમણો સાથે CSS એનિમેશનને જોડો
- સામગ્રીને મંદ કરો અને ફ્લોટેડ એલિમેન્ટ પર સક્રિય વર્ગ લાગુ કરો
પેક્મેન
Pacman નું તમારું પોતાનું સંસ્કરણ બનાવો. રમતો કેવી રીતે વિકસિત થાય છે તેનો ખ્યાલ મેળવવા અને મૂળભૂત બાબતોને સમજવાની આ એક સરસ રીત છે. JavaScript ફ્રેમવર્ક, પ્રતિક્રિયા અથવા Vue નો ઉપયોગ કરો.
તમે શીખી જશો:
- તત્વો કેવી રીતે ફરે છે
- કઈ કી દબાવવી તે કેવી રીતે નક્કી કરવું
- અથડામણની ક્ષણ કેવી રીતે નક્કી કરવી
- તમે આગળ જઈને ભૂત ચળવળ નિયંત્રણો ઉમેરી શકો છો
તમને આ પ્રોજેક્ટનું ઉદાહરણ મળશે GitHub
વપરાશકર્તા સંચાલન
આ પ્રોજેક્ટ GitHub
વપરાશકર્તા વહીવટ માટે CRUD પ્રકારની એપ્લિકેશન બનાવવાથી તમને વિકાસની મૂળભૂત બાબતો શીખવવામાં આવશે. આ ખાસ કરીને નવા વિકાસકર્તાઓ માટે ઉપયોગી છે.
તમે શીખી જશો:
- રૂટીંગ શું છે
- ડેટા એન્ટ્રી ફોર્મ કેવી રીતે હેન્ડલ કરવું અને વપરાશકર્તાએ શું દાખલ કર્યું છે તે તપાસો
- ડેટાબેઝ સાથે કેવી રીતે કાર્ય કરવું - ક્રિયાઓ બનાવો, વાંચો, અપડેટ કરો અને કાઢી નાખો
Проверка погоды в вашем местоположении
આ પ્રોજેક્ટ GitHub
જો તમે એપ્સ બનાવવા માંગતા હો, તો હવામાન એપ્લિકેશનથી પ્રારંભ કરો. આ પ્રોજેક્ટ સ્વિફ્ટની મદદથી પૂર્ણ કરી શકાય છે.
એપ્લિકેશન બનાવવાનો અનુભવ મેળવવા ઉપરાંત, તમે શીખી શકશો:
- API સાથે કેવી રીતે કામ કરવું
- ભૌગોલિક સ્થાનનો ઉપયોગ કેવી રીતે કરવો
- ટેક્સ્ટ ઇનપુટ ઉમેરીને તમારી એપ્લિકેશનને વધુ ગતિશીલ બનાવો. તેમાં, યુઝર્સ ચોક્કસ સ્થાન પર હવામાન તપાસવા માટે તેમનું સ્થાન દાખલ કરી શકશે.
તમારે API ની જરૂર પડશે. હવામાન ડેટા મેળવવા માટે, OpenWeather API નો ઉપયોગ કરો. OpenWeather API વિશે વધુ માહિતી.
Окно чата
મારી ચેટ વિન્ડો એક્શનમાં છે, બે બ્રાઉઝર ટેબમાં ખોલો
ચેટ વિન્ડો બનાવવી એ સોકેટ્સ સાથે પ્રારંભ કરવાની સંપૂર્ણ રીત છે. ટેક સ્ટેકની પસંદગી વિશાળ છે. Node.js, ઉદાહરણ તરીકે, સંપૂર્ણ છે.
તમે શીખી શકશો કે સોકેટ્સ કેવી રીતે કાર્ય કરે છે અને તેને કેવી રીતે અમલમાં મૂકવું. આ પ્રોજેક્ટનો આ મુખ્ય ફાયદો છે.
જો તમે લારાવેલ ડેવલપર છો જે સોકેટ્સ સાથે કામ કરવા માગે છે, તો મારું વાંચો
ગિટલેબ સી.આઈ.
જો તમે સતત એકીકરણ (CI) માટે નવા છો, તો GitLab CI સાથે રમો. થોડા વાતાવરણ સેટ કરો અને કેટલાક પરીક્ષણો ચલાવવાનો પ્રયાસ કરો. તે બહુ મુશ્કેલ પ્રોજેક્ટ નથી, પરંતુ મને ખાતરી છે કે તમે તેનાથી ઘણું શીખી શકશો. ઘણી ડેવલપમેન્ટ ટીમો હવે CI નો ઉપયોગ કરી રહી છે. તેનો ઉપયોગ કેવી રીતે કરવો તે જાણવું ઉપયોગી છે.
તમે શીખી જશો:
- GitLab CI શું છે
- કેવી રીતે ગોઠવવું
.gitlab-ci.ymlજે GitLab વપરાશકર્તાને શું કરવું તે કહે છે - અન્ય વાતાવરણમાં કેવી રીતે જમાવવું
Анализатор сайтов
એક સ્ક્રેપર બનાવો જે વેબસાઇટ્સના સિમેન્ટિક્સનું વિશ્લેષણ કરે અને તેમનું રેટિંગ બનાવે. ઉદાહરણ તરીકે, તમે ઈમેજોમાં ગુમ થયેલ Alt ટૅગ્સ માટે તપાસ કરી શકો છો. અથવા પેજમાં SEO મેટા ટૅગ્સ છે કે કેમ તે તપાસો. યુઝર ઇન્ટરફેસ વિના સ્ક્રેપર બનાવી શકાય છે.
તમે શીખી જશો:
- સ્ક્રેપર કેવી રીતે કામ કરે છે?
- DOM પસંદગીકારો કેવી રીતે બનાવવું
- એલ્ગોરિધમ કેવી રીતે લખવું
- જો તમે ત્યાં રોકવા માંગતા નથી, તો વપરાશકર્તા ઇન્ટરફેસ બનાવો. તમે તપાસો છો તે દરેક વેબસાઇટ પર તમે રિપોર્ટ પણ બનાવી શકો છો.
Определение настроений в социальных сетях
સોશિયલ મીડિયા પર સેન્ટિમેન્ટ ડિટેક્શન એ મશીન લર્નિંગનો પરિચય કરાવવાની એક સરસ રીત છે.
તમે ફક્ત એક સામાજિક નેટવર્કનું વિશ્લેષણ કરીને પ્રારંભ કરી શકો છો. દરેક વ્યક્તિ સામાન્ય રીતે ટ્વિટરથી શરૂઆત કરે છે.
જો તમને પહેલાથી જ મશીન લર્નિંગનો અનુભવ હોય, તો વિવિધ સામાજિક નેટવર્ક્સમાંથી ડેટા એકત્રિત કરવાનો અને તેને સંયોજિત કરવાનો પ્રયાસ કરો.
તમે શીખી જશો:
- મશીન લર્નિંગ શું છે
Клон Trello
તમે શું શીખશો:
- વિનંતી પ્રક્રિયા માર્ગોનું સંગઠન (રૂટીંગ).
- ખેંચો અને છોડો.
- નવા ઑબ્જેક્ટ્સ (બોર્ડ, સૂચિ, કાર્ડ) કેવી રીતે બનાવવું.
- ઇનપુટ ડેટાની પ્રક્રિયા અને તપાસ.
- ક્લાયંટ તરફથી: સ્થાનિક સ્ટોરેજનો ઉપયોગ કેવી રીતે કરવો, સ્થાનિક સ્ટોરેજમાં ડેટા કેવી રીતે સાચવવો, સ્થાનિક સ્ટોરેજમાંથી ડેટા કેવી રીતે વાંચવો.
- સર્વર બાજુથી: ડેટાબેઝનો ઉપયોગ કેવી રીતે કરવો, ડેટાબેઝમાં ડેટા કેવી રીતે સાચવવો, ડેટાબેઝમાંથી ડેટા કેવી રીતે વાંચવો.
, React+Redux માં બનાવેલ.
Панель админа
એક સરળ CRUD એપ્લિકેશન, મૂળભૂત શીખવા માટે આદર્શ. ચાલો જાણીએ:
- વપરાશકર્તાઓ બનાવો, વપરાશકર્તાઓનું સંચાલન કરો.
- ડેટાબેઝ સાથે ક્રિયાપ્રતિક્રિયા કરો - વપરાશકર્તાઓ બનાવો, વાંચો, સંપાદિત કરો, કાઢી નાખો.
- ઇનપુટને માન્ય કરવું અને ફોર્મ્સ સાથે કામ કરવું.
Трекер криптовалют (нативное мобильное приложение)
કંઈપણ: સ્વિફ્ટ, ઑબ્જેક્ટિવ-સી, રીએક્ટ નેટિવ, જાવા, કોટલિન.
ચાલો અભ્યાસ કરીએ:
- મૂળ એપ્લિકેશનો કેવી રીતે કાર્ય કરે છે.
- API માંથી ડેટા કેવી રીતે પુનઃપ્રાપ્ત કરવો.
- મૂળ પૃષ્ઠ લેઆઉટ કેવી રીતે કાર્ય કરે છે.
- મોબાઇલ સિમ્યુલેટર સાથે કેવી રીતે કામ કરવું.
. જો તમને કંઈક સારું લાગે, તો ટિપ્પણીઓમાં લખો.
જો તમને રસ હોય, તો તે અહીં છે .
Настроить собственный конфиг webpack с нуля
તકનીકી રીતે, આ કોઈ એપ્લિકેશન નથી, પરંતુ વેબપેક અંદરથી કેવી રીતે કાર્ય કરે છે તે સમજવા માટે તે ખૂબ જ ઉપયોગી કાર્ય છે. હવે તે "બ્લેક બોક્સ" નહીં, પણ સમજી શકાય તેવું સાધન હશે.
જરૂરીયાતો:
- es7 થી es5 (મૂળભૂત) કમ્પાઇલ કરો.
- jsx થી js - અથવા - .vue to .js કમ્પાઈલ કરો (તમારે લોડર્સ શીખવા પડશે)
- વેબપેક ડેવ સર્વર અને હોટ મોડ્યુલ રીલોડિંગ સેટ કરો. (vue-cli અને create-react-app બંનેનો ઉપયોગ કરે છે)
- Heroku, now.sh અથવા Github નો ઉપયોગ કરો, વેબપેક પ્રોજેક્ટ્સ કેવી રીતે જમાવવા તે શીખો.
- css - scss, less, stylus કમ્પાઈલ કરવા માટે તમારા મનપસંદ પ્રીપ્રોસેસરને સેટ કરો.
- વેબપેક સાથે છબીઓ અને svgs નો ઉપયોગ કેવી રીતે કરવો તે જાણો.
Клон Hackernews
દરેક જેડીએ પોતાના હેકરન્યૂઝ બનાવવા જરૂરી છે.
રસ્તામાં તમે શું શીખશો:
- હેકરન્યૂઝ API સાથે કેવી રીતે ક્રિયાપ્રતિક્રિયા કરવી.
- સિંગલ પેજ એપ્લિકેશન કેવી રીતે બનાવવી.
- ટિપ્પણીઓ, વ્યક્તિગત ટિપ્પણીઓ, પ્રોફાઇલ્સ જોવા જેવી સુવિધાઓનો અમલ કેવી રીતે કરવો.
- વિનંતી પ્રક્રિયા માર્ગોનું સંગઠન (રૂટીંગ).
Тудушечка
ગંભીરતાથી? તુદુષ્કા? તેમાંના હજારો છે. પરંતુ મારા પર વિશ્વાસ કરો, આ લોકપ્રિયતા માટે એક કારણ છે.
તમે મૂળભૂત બાબતોને સમજો છો તેની ખાતરી કરવા માટે Tudu એપ્લિકેશન એ એક સરસ રીત છે. એક એપ્લિકેશન વેનીલા જાવાસ્ક્રિપ્ટમાં અને એક તમારા મનપસંદ ફ્રેમવર્કમાં લખવાનો પ્રયાસ કરો.
જાણો:
- નવા કાર્યો બનાવો.
- તપાસો કે ફીલ્ડ્સ ભરાઈ ગયા છે.
- ફિલ્ટર કાર્યો (પૂર્ણ, સક્રિય, બધા). વાપરવુ
filterиreduce. - Javascript ની મૂળભૂત બાબતોને સમજો.
Сортируемый drag and drop список
સમજવામાં ખૂબ મદદરૂપ .
ચાલો જાણીએ:
- API ખેંચો અને છોડો
- સમૃદ્ધ UIs બનાવો
Клон мессенджера (нативное приложение)
તમે સમજી શકશો કે વેબ એપ્લીકેશન અને નેટીવ એપ્લીકેશન બંને કેવી રીતે કામ કરે છે, જે તમને ગ્રે માસથી અલગ કરશે.
આપણે શું અભ્યાસ કરીશું:
- વેબ સોકેટ્સ (ત્વરિત સંદેશાઓ)
- મૂળ એપ્લિકેશનો કેવી રીતે કાર્ય કરે છે.
- નેટીવ એપ્લીકેશનમાં ટેમ્પલેટ્સ કેવી રીતે કામ કરે છે.
- નેટીવ એપ્લીકેશનમાં વિનંતી પ્રક્રિયાના રૂટનું આયોજન કરવું.
ટેક્સ્ટ એડિટર
ટેક્સ્ટ એડિટરનો હેતુ તેમના ફોર્મેટિંગને માન્ય HTML માર્કઅપમાં રૂપાંતરિત કરવાનો પ્રયાસ કરતા વપરાશકર્તાઓના પ્રયત્નોને ઘટાડવાનો છે. એક સારો ટેક્સ્ટ એડિટર વપરાશકર્તાઓને ટેક્સ્ટને વિવિધ રીતે ફોર્મેટ કરવાની મંજૂરી આપે છે.
અમુક સમયે, દરેક વ્યક્તિએ ટેક્સ્ટ એડિટરનો ઉપયોગ કર્યો છે. તો શા માટે નહીં ?
Клон Reddit
એક સામાજિક સમાચાર એકત્રીકરણ, વેબ સામગ્રી રેટિંગ અને ચર્ચા સાઇટ છે.
Reddit મારો મોટાભાગનો સમય લે છે, પરંતુ હું તેના પર હેંગઆઉટ કરવાનું ચાલુ રાખું છું. Reddit ક્લોન બનાવવું એ પ્રોગ્રામિંગ શીખવાની એક અસરકારક રીત છે (તે જ સમયે Reddit બ્રાઉઝ કરતી વખતે).
Reddit તમને ખૂબ જ સમૃદ્ધ પ્રદાન કરે છે. કોઈપણ લક્ષણો છોડશો નહીં અથવા આડેધડ રીતે વસ્તુઓ કરશો નહીં. ગ્રાહકો અને ગ્રાહકો સાથે વાસ્તવિક દુનિયામાં, તમે આડેધડ કામ કરી શકતા નથી, અથવા તમે ઝડપથી તમારી નોકરી ગુમાવશો.
સ્માર્ટ ક્લાયંટને તરત જ ખ્યાલ આવશે કે કામ ખરાબ રીતે કરવામાં આવી રહ્યું છે અને તે બીજા કોઈને શોધી કાઢશે.
Публикация пакета NPM с открытым исходным кодом
જો તમે Javascript કોડ લખો છો, તો સંભવ છે કે તમે પેકેજ મેનેજરનો ઉપયોગ કરો છો. પેકેજ મેનેજર તમને અન્ય લોકોએ લખેલા અને પ્રકાશિત કરેલા હાલના કોડનો ફરીથી ઉપયોગ કરવાની મંજૂરી આપે છે.
પેકેજના સંપૂર્ણ વિકાસ ચક્રને સમજવું ખૂબ જ સારો અનુભવ પ્રદાન કરશે. કોડ પ્રકાશિત કરતી વખતે તમારે ઘણી વસ્તુઓ જાણવાની જરૂર છે. તમારે સુરક્ષા, સિમેન્ટીક વર્ઝનિંગ, માપનીયતા, નામકરણ સંમેલનો અને જાળવણી વિશે વિચારવાની જરૂર છે.
પેકેજ કંઈપણ હોઈ શકે છે. જો તમારી પાસે કોઈ વિચાર નથી, તો તમારું પોતાનું લોડાશ બનાવો અને તેને પ્રકાશિત કરો.
લોડાશ:
તમે જે કંઈ ઓનલાઈન કર્યું છે તે રાખવાથી તમે અન્ય લોકો કરતા 10% ઉપર છો. ખુલ્લા સ્ત્રોતો અને પેકેજો વિશે.
Учебный план freeCodeCamp
ફ્રીકોડકેમ્પે ઘણું બધું એકત્રિત કર્યું છે .
freeCodeCamp એક બિન-લાભકારી સંસ્થા છે. તેમાં ઇન્ટરેક્ટિવ વેબ-આધારિત લર્નિંગ પ્લેટફોર્મ, ઑનલાઇન સમુદાય મંચ, ચેટ રૂમ, માધ્યમ પ્રકાશનો અને સ્થાનિક સંસ્થાઓનો સમાવેશ થાય છે જે દરેક માટે વેબ ડેવલપમેન્ટ શીખવા માટે સુલભ બનાવવાનો ઇરાદો ધરાવે છે.
જો તમે આખો અભ્યાસક્રમ પૂર્ણ કરવાનું મેનેજ કરશો તો તમે તમારી પ્રથમ નોકરી માટે વધુ લાયક બનશો.
Создайте HTTP-сервер с нуля
HTTP પ્રોટોકોલ એ મુખ્ય પ્રોટોકોલ્સમાંથી એક છે જેના દ્વારા સામગ્રી ઇન્ટરનેટ પર મુસાફરી કરે છે. HTTP સર્વર્સનો ઉપયોગ HTML, CSS અને JS જેવી સ્થિર સામગ્રીને સેવા આપવા માટે થાય છે.
શરૂઆતથી HTTP પ્રોટોકોલનો અમલ કરવામાં સક્ષમ થવાથી વસ્તુઓ કેવી રીતે ક્રિયાપ્રતિક્રિયા કરે છે તેના તમારા જ્ઞાનને વિસ્તૃત કરશે.
ઉદાહરણ તરીકે, જો તમે નોડજેનો ઉપયોગ કરો છો, તો તમે જાણો છો કે એક્સપ્રેસ HTTP સર્વર પ્રદાન કરે છે.
સંદર્ભ માટે, જુઓ કે શું તમે કરી શકો છો:
- કોઈપણ પુસ્તકાલયોનો ઉપયોગ કર્યા વિના સર્વર સેટ કરો
- સર્વરે HTML, CSS અને JS સામગ્રી આપવી આવશ્યક છે.
- શરૂઆતથી રાઉટરનો અમલ
- ફેરફારોનું નિરીક્ષણ કરો અને સર્વરને અપડેટ કરો
જો તમને શા માટે ખબર નથી, તો ઉપયોગ કરો અને HTTP સર્વર બનાવવાનો પ્રયાસ કરો શરૂઆતથી
Десктопное приложение для заметок
આપણે બધા નોંધ લઈએ છીએ, નહીં?
ચાલો નોટ્સ એપ બનાવીએ. એપ્લિકેશનને નોંધો સાચવવાની અને ડેટાબેઝ સાથે સિંક્રનાઇઝ કરવાની જરૂર છે. ઇલેક્ટ્રોન, સ્વિફ્ટ અથવા તમને ગમે તે અને તમારી સિસ્ટમ માટે શું કામ કરે છે તેનો ઉપયોગ કરીને મૂળ એપ્લિકેશન બનાવો.
પ્રથમ પડકાર (ટેક્સ્ટ એડિટર) સાથે આને જોડવા માટે નિઃસંકોચ.
બોનસ તરીકે, તમારા ડેસ્કટોપ સંસ્કરણને વેબ સંસ્કરણ સાથે સમન્વયિત કરવાનો પ્રયાસ કરો.
Подкасты (клон Overcast)
પોડકાસ્ટ કોણ સાંભળતું નથી?
નીચેની કાર્યક્ષમતા સાથે વેબ એપ્લિકેશન બનાવો:
- એક ખાતુ બનાવો
- પોડકાસ્ટ શોધો
- પોડકાસ્ટને રેટ કરો અને સબ્સ્ક્રાઇબ કરો
- 30 સેકન્ડ માટે રોકો અને ચલાવો, ઝડપ બદલો, આગળ અને પાછળના કાર્યો કરો.
પ્રારંભિક બિંદુ તરીકે iTunes API નો ઉપયોગ કરવાનો પ્રયાસ કરો. જો તમને અન્ય કોઈ સંસાધનો ખબર હોય, તો કૃપા કરીને ટિપ્પણીઓમાં પોસ્ટ કરો.
સ્ક્રીન કેપ્ચર
નમસ્તે! હું હમણાં મારી સ્ક્રીનનું શૂટિંગ કરી રહ્યો છું!
એક ડેસ્કટોપ અથવા વેબ એપ્લિકેશન બનાવો જે તમને તમારી સ્ક્રીનને કેપ્ચર કરવાની અને ક્લિપને આ રીતે સાચવવાની મંજૂરી આપે .gif
અહીં આ કેવી રીતે પ્રાપ્ત કરવું.
સ્ત્રોતો
સોર્સ: www.habr.com