1. Клон Notion
Приложение Notion полюбилось многим, оно позволяет оптимизировать рабочий процесс, работать с документами, планировать задачи, синхронизировать данные между устройствами.
Чему вы научитесь, создавая клон Notion:
- . Пользователь может «схватить мышкой» draggable элемент и поместить его в droppable зону.
- Как синхронизировать в режиме реального времени данные между компьютером и смартфоном.
- Мы позволяем пользователям создавать, читать, обновлять и удалять записи, тем самым мы тренируем CRUD-навыки.
लेख एडिसन सफ्टवेयरको समर्थनमा अनुवाद गरिएको थियो, जुन र .
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 मा जन्म भएको थियो। r/layer समुदाय साझा रचनात्मकताको लागि एक रूपक हो, कि सबैजना एक सिर्जनाकर्ता हुन सक्छन् र साझा कारणमा योगदान गर्न सक्छन्।
तपाईको आफ्नै लेयर प्रोजेक्ट सिर्जना गर्दा तपाईले के सिक्नुहुनेछ:
- JavaScript क्यानभासले कसरी काम गर्छ क्यानभास कसरी सञ्चालन गर्ने भन्ने कुरा थाहा पाउनु धेरै अनुप्रयोगहरूमा एउटा महत्वपूर्ण सीप हो।
- प्रयोगकर्ता अनुमतिहरू कसरी समन्वय गर्ने। प्रत्येक प्रयोगकर्ताले लगइन नगरी प्रत्येक 15 मिनेटमा एक पिक्सेल कोर्न सक्छ।
- कुकी सत्रहरू सिर्जना गर्नुहोस्।
स्क्वुश
Squoosh धेरै उन्नत विकल्पहरूको साथ छवि सङ्कुचन अनुप्रयोग हो।
GIF २० एमबी
Squosh को आफ्नै संस्करण सिर्जना गरेर तपाईंले सिक्नुहुनेछ:
- छवि आकार संग कसरी काम गर्ने
- Drag'n'Drop API को आधारभूत कुराहरू जान्नुहोस्
- API र घटना श्रोताहरूले कसरी काम गर्छन् भनेर बुझ्नुहोस्
- फाइलहरू कसरी अपलोड र निर्यात गर्ने
नोट: छवि कम्प्रेसर स्थानीय छ। सर्भरमा थप डाटा पठाउन आवश्यक छैन। तपाईं घरमा कम्प्रेसर हुन सक्नुहुन्छ, वा तपाईं यसलाई सर्भरमा प्रयोग गर्न सक्नुहुन्छ, तपाईंको छनौट।
क्यालकुलेटर
आउनुहोस्? गम्भीरतापूर्वक? क्याल्कुलेटर? हो, ठ्याक्कै, एक क्याल्कुलेटर। गणित सञ्चालनका आधारभूत कुराहरू बुझ्न र तिनीहरूले कसरी सँगै काम गर्छन् तपाइँको अनुप्रयोगहरू सरल बनाउनको लागि एक महत्वपूर्ण सीप हो। ढिलो वा चाँडो तपाईले संख्याहरूसँग व्यवहार गर्नुपर्नेछ र चाँडो राम्रो।
तपाईंको आफ्नै क्यालकुलेटर सिर्जना गरेर तपाईंले सिक्नुहुनेछ:
- संख्या र गणित सञ्चालन संग काम गर्नुहोस्
- घटना श्रोता API संग अभ्यास
- तत्वहरू कसरी व्यवस्थित गर्ने, शैलीहरू बुझ्नुहोस्
क्रलर (खोज इन्जिन)
सबैले खोज इन्जिन प्रयोग गरेका छन्, त्यसोभए किन आफ्नै सिर्जना नगर्ने? जानकारी खोज्नको लागि क्रलर आवश्यक छ। सबैले तिनीहरूलाई हरेक दिन प्रयोग गर्छन् र यो प्रविधि र विशेषज्ञहरूको माग समयसँगै बढ्नेछ।
गुगल खोज इन्जिन
तपाइँ तपाइँको आफ्नै खोज इन्जिन सिर्जना गरेर के सिक्नुहुनेछ:
- क्रलरहरूले कसरी काम गर्छन्
- कसरी साइटहरू अनुक्रमणिका गर्ने र कसरी मूल्याङ्कन र प्रतिष्ठा द्वारा तिनीहरूलाई क्रमबद्ध गर्ने
- कसरी डाटाबेसमा अनुक्रमित साइटहरू भण्डार गर्ने र डाटाबेससँग कसरी काम गर्ने
संगीत प्लेयर (Spotify, Apple Music)
सबैले संगीत सुन्छन् - यो हाम्रो जीवनको अभिन्न अंग मात्र हो। आधुनिक संगीत स्ट्रिमिङ प्लेटफर्मको आधारभूत मेकानिक्सले कसरी काम गर्छ भन्ने राम्रोसँग बुझ्नको लागि एउटा संगीत प्लेयर सिर्जना गरौं।
Spotify
तपाइँ तपाइँको आफ्नै संगीत स्ट्रिमिङ प्लेटफर्म सिर्जना गरेर के सिक्नुहुनेछ:
- API सँग कसरी काम गर्ने। Spotify वा Apple Music बाट API प्रयोग गर्नुहोस्
- कसरी खेल्ने, पज गर्ने वा अर्को/अघिल्लो ट्र्याकमा रिवाइन्ड गर्ने
- भोल्युम कसरी परिवर्तन गर्ने
- प्रयोगकर्ता मार्ग र ब्राउजर इतिहास कसरी व्यवस्थापन गर्ने
प्रतिक्रिया प्रयोग गरेर चलचित्र खोज एप (हुकको साथ)
तपाईंले सुरु गर्न सक्नुहुने पहिलो कुरा भनेको प्रतिक्रिया प्रयोग गरेर चलचित्र खोज एप सिर्जना गर्नु हो। तल अन्तिम आवेदन कस्तो देखिनेछ को एक छवि छ:
तपाइँ के सिक्नुहुनेछ
यो एप निर्माण गरेर, तपाईंले अपेक्षाकृत नयाँ Hooks API प्रयोग गरेर आफ्नो React कौशल सुधार गर्नुहुनेछ। उदाहरण परियोजनाले प्रतिक्रिया कम्पोनेन्टहरू, धेरै हुकहरू, एक बाह्य API, र निश्चित रूपमा केही CSS स्टाइल प्रयोग गर्दछ।
टेक स्ट्याक र सुविधाहरू
- हुकहरूसँग प्रतिक्रिया गर्नुहोस्
- सिर्जना-प्रतिक्रिया-अनुप्रयोग
- JSX
- CSS
कुनै पनि कक्षाहरू प्रयोग नगरिकन, यी परियोजनाहरूले तपाईंलाई कार्यात्मक प्रतिक्रियामा उत्तम प्रविष्टि बिन्दु दिन्छ र निश्चित रूपमा २०२० मा तपाईंलाई मद्दत गर्नेछ। तपाईं फेला पार्न सक्नुहुन्छ । निर्देशनहरू पालना गर्नुहोस् वा यसलाई आफ्नै बनाउनुहोस्।
Vue सँग च्याट एप
तपाइँको लागि अर्को उत्कृष्ट परियोजना मेरो मनपर्ने JavaScript पुस्तकालय प्रयोग गरेर च्याट एप सिर्जना गर्नु हो: VueJS। अनुप्रयोग यस्तो केहि देखिनेछ:
तपाइँ के सिक्नुहुनेछ
यस ट्यूटोरियलमा, तपाईंले स्क्र्याचबाट Vue एप कसरी बनाउने भन्ने सिक्नुहुनेछ - कम्पोनेन्टहरू सिर्जना गर्ने, स्थिति ह्यान्डल गर्ने, मार्गहरू सिर्जना गर्ने, तेस्रो-पक्ष सेवाहरूमा जडान गर्ने, र प्रमाणीकरणलाई ह्यान्डल गर्ने।
टेक स्ट्याक र सुविधाहरू
- Vue
- भ्वेक्स
- भ्यू राउटर
- CLI दृश्य
- पुशर
- CSS
यो Vue को साथ सुरु गर्न वा 2020 मा विकासमा जानको लागि तपाइँको अवस्थित कौशल सुधार गर्न को लागी एक साँच्चै ठूलो परियोजना हो। तपाईं फेला पार्न सक्नुहुन्छ .
Angular 8 संग सुन्दर मौसम एप
यो उदाहरणले तपाईंलाई Angular 8 प्रयोग गरी सुन्दर मौसम एप सिर्जना गर्न मद्दत गर्नेछ:
तपाइँ के सिक्नुहुनेछ
यस परियोजनाले तपाईंलाई स्क्र्याचबाट अनुप्रयोगहरू निर्माण गर्न मूल्यवान सीपहरू सिकाउनेछ - डिजाइनदेखि विकास, सबै तरिकाले डिप्लोइमेन्ट-रेडी एप्लिकेसनसम्म।
टेक स्ट्याक र सुविधाहरू
- कोणीय २
- Firebase
- सर्भर साइड रेन्डरिङ
- ग्रिड र फ्लेक्सबक्सको साथ CSS
- मोबाइल अनुकूल र अनुकूलन क्षमता
- गाढा मोड
- सुन्दर इन्टरफेस
यो सबै-समावेश परियोजनाको बारेमा मलाई साँच्चिकै मनपर्ने कुरा यो हो कि तपाईले चीजहरू एक्लोपनमा अध्ययन गर्नुहुन्न। यसको सट्टा, तपाइँ सम्पूर्ण विकास प्रक्रिया सिक्नुहुन्छ, डिजाइन देखि अन्तिम तैनाती सम्म।
Svelte प्रयोग गरेर गर्न को लागी अनुप्रयोग
Svelte कम्पोनेन्ट-आधारित दृष्टिकोणमा नयाँ बच्चा जस्तै छ - कम्तिमा प्रतिक्रिया, Vue र Angular जस्तै। र यो २०२० को लागि सबैभन्दा लोकप्रिय नयाँ उत्पादनहरू मध्ये एक हो।
गर्नका लागि एपहरू सबै भन्दा तातो विषय होइनन्, तर यसले वास्तवमै तपाइँको Svelte कौशललाई सुधार्न मद्दत गर्नेछ। यो यस्तो देखिनेछ:
तपाइँ के सिक्नुहुनेछ
यस ट्यूटोरियलले तपाइँलाई Svelte 3 को प्रयोग गरेर कसरी एप सिर्जना गर्ने भनेर देखाउनेछ, सुरु देखि अन्त्य सम्म। तपाईंले कम्पोनेन्टहरू, स्टाइलिङ र घटना ह्यान्डलरहरू प्रयोग गर्नुहुनेछ
टेक स्ट्याक र सुविधाहरू
- Svelte 3
- अवयव
- CSS को साथ स्टाइल
- ES 6 वाक्य रचना
त्यहाँ धेरै राम्रो Svelte स्टार्टर परियोजनाहरू छैनन्, त्यसैले मैले फेला पारे .
Next.js प्रयोग गरेर ई-वाणिज्य एप
Next.js प्रतिक्रिया अनुप्रयोगहरू निर्माण गर्नको लागि सबैभन्दा लोकप्रिय फ्रेमवर्क हो जसले सर्भर-साइड रेन्डरिङलाई बाकसमा समर्थन गर्दछ।
यस परियोजनाले तपाइँलाई यो जस्तो देखिने ई-वाणिज्य अनुप्रयोग कसरी सिर्जना गर्ने भनेर देखाउनेछ:
तपाइँ के सिक्नुहुनेछ
यस परियोजनामा, तपाइँ कसरी Next.js को साथ विकास गर्ने सिक्नुहुनेछ — नयाँ पृष्ठहरू र कम्पोनेन्टहरू सिर्जना गर्नुहोस्, डेटा निकाल्नुहोस्, र शैली र अर्को अनुप्रयोग प्रयोग गर्नुहोस्।
टेक स्ट्याक र सुविधाहरू
- Next.js
- अवयव र पृष्ठहरू
- डाटा नमूना
- शैलीकरण
- परियोजना परिनियोजन
- SSR र SPA
नयाँ कुरा सिक्नको लागि इ-कमर्स एप जस्तै वास्तविक संसारको उदाहरण पाउनु सधैं राम्रो हुन्छ। तिमी सक्छौ .
Nuxt.js को साथ पूर्ण बहुभाषिक ब्लग
Nuxt.js Vue का लागि हो, Next.js प्रतिक्रियाको लागि के हो: सर्भर-साइड रेन्डरिङ र एकल-पृष्ठ अनुप्रयोगहरूको शक्ति संयोजनको लागि उत्कृष्ट फ्रेमवर्क।
तपाईंले सिर्जना गर्न सक्ने अन्तिम अनुप्रयोग यस्तो देखिन्छ:
तपाइँ के सिक्नुहुनेछ
यस नमूना परियोजनामा, तपाइँ कसरी Nuxt.js प्रयोग गरेर एक पूर्ण वेबसाइट सिर्जना गर्ने सिक्नुहुनेछ, प्रारम्भिक सेटअप देखि अन्तिम डिप्लोयमेन्ट सम्म।
यसले Nuxt ले प्रस्ताव गर्ने धेरै उत्कृष्ट सुविधाहरूको फाइदा लिन्छ, जस्तै पृष्ठहरू र कम्पोनेन्टहरू, र SCSS सँग स्टाइल।
टेक स्ट्याक र सुविधाहरू
- Nuxt.js
- अवयव र पृष्ठहरू
- स्टोरीब्लक मोड्युल
- ह्यागफिस
- राज्य व्यवस्थापनको लागि Vuex
- स्टाइलको लागि SCSS
- Nuxt Middlewares
, जसमा धेरै उत्कृष्ट Nuxt.js सुविधाहरू समावेश छन्। म व्यक्तिगत रूपमा Nuxt सँग काम गर्न मन पराउँछु त्यसैले तपाईंले यसलाई प्रयास गर्नुपर्छ किनकि यसले तपाईंलाई उत्कृष्ट Vue विकासकर्ता पनि बनाउनेछ।
Gatsby संग ब्लग
Gatsby प्रतिक्रिया र GraphQL प्रयोग गरेर एक उत्कृष्ट स्थिर साइट जनरेटर हो। यस्तो छ परियोजनाको नतिजा:
तपाइँ के सिक्नुहुनेछ
यस ट्यूटोरियलमा, तपाईंले प्रतिक्रिया र GraphQL प्रयोग गरेर आफ्नै लेखहरू लेख्न प्रयोग गर्ने ब्लग सिर्जना गर्न Gatsby कसरी प्रयोग गर्ने भनेर सिक्नुहुनेछ।
टेक स्ट्याक र सुविधाहरू
- Gatsby
- प्रतिक्रिया
- ग्राफिक
- प्लगइनहरू र विषयवस्तुहरू
- MDX/मार्कडाउन
- बुटस्ट्र्याप सीएसएस
- टेम्प्लेट
यदि तपाइँ कहिल्यै ब्लग सुरु गर्न चाहनुहुन्छ भने, प्रतिक्रिया र GraphQL प्रयोग गरेर यसलाई कसरी बनाउने।
म वर्डप्रेस नराम्रो छनोट हो भनी होइन, तर ग्याट्सबीको साथ तपाईले प्रतिक्रिया प्रयोग गरेर उच्च प्रदर्शन वेबसाइटहरू निर्माण गर्न सक्नुहुन्छ - जुन एक अद्भुत संयोजन हो।
Gridsome को साथ ब्लग
Vue को लागि Gridsome... ठीक छ, हामीसँग यो पहिले नै Next/Nuxt सँग थियो।
तर ग्रिडसम र ग्याट्सबीको लागि पनि त्यस्तै हो। दुवैले आफ्नो डेटा तहको रूपमा GraphQL प्रयोग गर्छन्, तर Gridsome ले VueJS प्रयोग गर्दछ। यो पनि एक अद्भुत स्थिर साइट जनरेटर हो जसले तपाईंलाई उत्कृष्ट ब्लगहरू सिर्जना गर्न मद्दत गर्दछ:
तपाइँ के सिक्नुहुनेछ
यस परियोजनाले तपाइँलाई Gridsome, GraphQL र Markdown सँग सुरु गर्न सरल ब्लग कसरी सिर्जना गर्ने भनेर सिकाउनेछ। यसले Netlify मार्फत एप्लिकेसन कसरी डिप्लोय गर्ने भनेर पनि समेट्छ।
टेक स्ट्याक र सुविधाहरू
- ग्रिडसम
- Vue
- ग्राफिक
- छुट
- नेटलिफाई
यो पक्कै पनि सबैभन्दा व्यापक ट्यूटोरियल होइन, तर यसले Gridsome को आधारभूत अवधारणाहरू समेट्छ र .
Quasar प्रयोग गरेर SoundCloud-जस्तो अडियो प्लेयर
Quasar अर्को Vue फ्रेमवर्क हो जुन मोबाइल अनुप्रयोगहरू सिर्जना गर्न प्रयोग गर्न सकिन्छ। यस परियोजनामा तपाईंले अडियो प्लेयर अनुप्रयोग सिर्जना गर्नुहुनेछ, उदाहरणका लागि:
तपाइँ के सिक्नुहुनेछ
जबकि अन्य परियोजनाहरू मुख्यतया वेब अनुप्रयोगहरूमा केन्द्रित हुन्छन्, यसले तपाईंलाई Vue र Quasar फ्रेमवर्क प्रयोग गरेर मोबाइल अनुप्रयोग कसरी सिर्जना गर्ने भनेर देखाउनेछ।
तपाईंसँग पहिले नै एन्ड्रोइड स्टुडियो/एक्सकोड कन्फिगर गरिएको Cordova चलिरहेको हुनुपर्छ। यदि होइन भने, म्यानुअलसँग Quasar वेबसाइटको लिङ्क छ जहाँ तिनीहरूले तपाइँलाई सबै कुरा कसरी सेट अप गर्ने भनेर देखाउँछन्।
टेक स्ट्याक र सुविधाहरू
- Quasar
- Vue
- कोर्डोवा
- वेभसर्फर
- UI अवयवहरू
, मोबाइल अनुप्रयोगहरू सिर्जना गर्न Quasar को क्षमताहरू प्रदर्शन गर्दै।
Форма кредитной карты
चिल्लो र रमाइलो माइक्रो-अन्तर्क्रियाको साथ एक राम्रो क्रेडिट कार्ड आकार। नम्बर ढाँचा, प्रमाणीकरण र स्वचालित कार्ड प्रकार पत्ता लगाउने समावेश गर्दछ। यो Vue.js मा निर्मित छ र पूर्ण रूपमा उत्तरदायी पनि छ। (तपाईं हेर्न सक्नुहुन्छ .)
तपाईंले के सिक्नुहुनेछ:
- प्रक्रिया र फारम प्रमाणीकरण
- घटनाहरू ह्यान्डल गर्नुहोस् (उदाहरणका लागि, जब क्षेत्रहरू परिवर्तन हुन्छन्)
- पृष्ठमा तत्वहरू कसरी प्रदर्शन गर्ने र राख्ने भन्ने बुझ्नुहोस्, विशेष गरी फारमको शीर्षमा देखा पर्ने क्रेडिट कार्ड जानकारी
बार ग्राफ
हिस्टोग्राम एउटा चार्ट वा ग्राफ हो जसले आयताकार पट्टीहरूसँग उचाइ वा लम्बाइहरू तिनीहरूले प्रतिनिधित्व गर्ने मानहरूको समानुपातिक रूपमा वर्गीकृत डेटा प्रतिनिधित्व गर्दछ।
तिनीहरू ठाडो वा तेर्सो रूपमा लागू गर्न सकिन्छ। ठाडो बार चार्टलाई कहिलेकाहीँ रेखा चार्ट भनिन्छ।
तपाईंले के सिक्नुहुनेछ:
- संरचित र बुझ्ने तरिकामा डेटा प्रदर्शन गर्नुहोस्
- थप रूपमा: तत्व कसरी प्रयोग गर्ने जान्नुहोस्
canvasर यसको साथ तत्वहरू कसरी आकर्षित गर्ने
तपाईं विश्व जनसंख्या डाटा पाउन सक्नुहुन्छ। तिनीहरू वर्ष द्वारा क्रमबद्ध छन्।
Анимация сердечка Twitter
2016 मा फिर्ता, ट्विटरले आफ्नो ट्वीटहरूको लागि यो अद्भुत एनिमेसन प्रस्तुत गर्यो। 2019 को रूपमा, यो अझै पनि भाग देखिन्छ, त्यसोभए किन आफैं सिर्जना नगर्ने?
तपाईंले के सिक्नुहुनेछ:
- CSS विशेषतासँग काम गर्नुहोस्
keyframes - HTML तत्वहरू हेरफेर र एनिमेट गर्नुहोस्
- JavaScript, HTML र CSS जोड्नुहोस्
Репозитории GitHub с функцией поиска
यहाँ केहि फैंसी छैन - GitHub भण्डारहरू केवल एक महिमा सूची हो।
लक्ष्य भनेको भण्डारहरू प्रदर्शन गर्नु र प्रयोगकर्तालाई तिनीहरूलाई फिल्टर गर्न अनुमति दिनु हो। प्रयोग गर्नुहोस् प्रत्येक प्रयोगकर्ताको लागि भण्डारहरू प्राप्त गर्न।
GitHub प्रोफाइल पृष्ठ -
तपाईंले के सिक्नुहुनेछ:
- API बाट डाटा प्राप्त गर्नुहोस्
- API बाट डेटा प्रदर्शन गर्नुहोस्
- फिल्टर गर्नुहोस् र प्रत्येक खोजको लागि सान्दर्भिक डेटा देखाउनुहोस्
- ऐच्छिक: यदि तपाईं चुनौतीको लागि तयार हुनुहुन्छ भने, प्रयोग गर्नुहोस् , GraphQL प्रयोग गरेर निर्मित। .
Чаты в стиле Reddit
कुराकानीहरू तिनीहरूको सरलता र प्रयोगको सजिलोको कारण संचारको लोकप्रिय माध्यम हो। तर के वास्तवमा आधुनिक च्याट कोठाहरू इन्धन गर्छ? वेबसकेटहरू!
तपाईंले के सिक्नुहुनेछ:
- WebSockets, वास्तविक समय सञ्चार र डाटा अपडेटहरू प्रयोग गर्नुहोस्
- प्रयोगकर्ता पहुँच स्तरहरूसँग काम गर्नुहोस् (उदाहरणका लागि, च्याट च्यानलको मालिकको भूमिका हुन्छ
admin, र कोठामा अन्य -user) - प्रशोधन गर्नुहोस् र फारमहरू मान्य गर्नुहोस् - सम्झनुहोस्, सन्देश पठाउनको लागि च्याट विन्डो हो
input - विभिन्न च्याटहरू सिर्जना गर्नुहोस् र सामेल हुनुहोस्
- व्यक्तिगत सन्देशहरूसँग काम गर्नुहोस्। प्रयोगकर्ताहरूले अन्य प्रयोगकर्ताहरूसँग निजी रूपमा च्याट गर्न सक्छन्। अनिवार्य रूपमा, तपाईंले दुई प्रयोगकर्ताहरू बीच वेबसकेट जडान स्थापना गर्नुहुनेछ।
Навигация в стиле Stripe
के यो नेभिगेसन अद्वितीय बनाउँछ कि पपओभर कन्टेनर सामग्री फिट गर्न रूपान्तरण। नयाँ पपओभर खोल्ने र बन्द गर्ने परम्परागत व्यवहारको तुलनामा यो संक्रमणको सुन्दरता छ।
तपाईंले के सिक्नुहुनेछ:
- ट्रान्जिसनको साथ CSS एनिमेसनहरू मिलाउनुहोस्
- सामग्रीलाई मधुरो पार्नुहोस् र फ्लोटेड तत्वमा सक्रिय वर्ग लागू गर्नुहोस्
Pacman
Pacman को आफ्नै संस्करण सिर्जना गर्नुहोस्। यो खेलहरू कसरी विकास गरिन्छ र आधारभूत कुराहरू बुझ्ने विचार प्राप्त गर्ने उत्कृष्ट तरिका हो। जाभास्क्रिप्ट फ्रेमवर्क, प्रतिक्रिया वा Vue प्रयोग गर्नुहोस्।
तपाइँ सिक्नुहुनेछ:
- तत्वहरू कसरी सर्छन्
- कुन कुञ्जीहरू थिच्ने भनेर कसरी निर्धारण गर्ने
- कसरी टक्कर को क्षण निर्धारण गर्न
- तपाईं अगाडि जान सक्नुहुन्छ र भूत आन्दोलन नियन्त्रण थप्न सक्नुहुन्छ
तपाईंले यस परियोजनाको उदाहरण पाउनुहुनेछ GitHub
व्यवस्थापन व्यवस्थापन
परियोजना GitHub
प्रयोगकर्ता प्रशासनको लागि CRUD प्रकारको अनुप्रयोग सिर्जना गर्दा तपाईंलाई विकासको आधारभूत कुराहरू सिकाउनेछ। यो विशेष गरी नयाँ विकासकर्ताहरूको लागि उपयोगी छ।
तपाइँ सिक्नुहुनेछ:
- रूटिङ के हो
- डेटा प्रविष्टि फारमहरू कसरी ह्यान्डल गर्ने र प्रयोगकर्ताले के प्रविष्ट गरेको छ भनेर जाँच गर्नुहोस्
- डाटाबेससँग कसरी काम गर्ने - कार्यहरू सिर्जना गर्नुहोस्, पढ्नुहोस्, अद्यावधिक गर्नुहोस् र मेटाउनुहोस्
Проверка погоды в вашем местоположении
परियोजना GitHub
यदि तपाइँ एपहरू सिर्जना गर्न चाहनुहुन्छ भने, मौसम एपबाट सुरु गर्नुहोस्। यो परियोजना स्विफ्ट प्रयोग गरेर पूरा गर्न सकिन्छ।
एप्लिकेसन निर्माणको अनुभव प्राप्त गर्नुको अतिरिक्त, तपाईंले सिक्नुहुनेछ:
- API सँग कसरी काम गर्ने
- जियोलोकेशन कसरी प्रयोग गर्ने
- पाठ इनपुट थपेर आफ्नो अनुप्रयोग थप गतिशील बनाउनुहोस्। यसमा, प्रयोगकर्ताहरूले कुनै निश्चित स्थानमा मौसम जाँच गर्न आफ्नो स्थान प्रविष्ट गर्न सक्षम हुनेछन्।
तपाईलाई एपीआई चाहिन्छ। मौसम डेटा प्राप्त गर्न, OpenWeather API प्रयोग गर्नुहोस्। OpenWeather API को बारेमा थप जानकारी.
Окно чата
मेरो च्याट विन्डो कार्यमा, दुई ब्राउजर ट्याबहरूमा खोल्नुहोस्
च्याट सञ्झ्याल सिर्जना गर्नु सकेटहरूसँग सुरु गर्नको लागि उत्तम तरिका हो। टेक स्ट्याक को छनोट ठूलो छ। Node.js, उदाहरणका लागि, उत्तम छ।
तपाईंले सकेटहरूले कसरी काम गर्ने र तिनीहरूलाई कसरी लागू गर्ने भनेर सिक्नुहुनेछ। यो यस परियोजना को मुख्य लाभ छ।
यदि तपाईं एक Laravel विकासकर्ता हुनुहुन्छ जो सकेटहरूसँग काम गर्न चाहनुहुन्छ भने, मेरो पढ्नुहोस्
GitLab सीआई
यदि तपाईं निरन्तर एकीकरण (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, कम, स्टाइलस कम्पाइल गर्न आफ्नो मनपर्ने प्रिप्रोसेसर सेट अप गर्नुहोस्।
- वेबप्याकको साथ छविहरू र svgs कसरी प्रयोग गर्ने सिक्नुहोस्।
Клон Hackernews
प्रत्येक Jedi लाई आफ्नै Hackernews बनाउन आवश्यक छ।
तपाईंले बाटोमा के सिक्नुहुनेछ:
- Hackernews API सँग कसरी अन्तरक्रिया गर्ने।
- एकल पृष्ठ अनुप्रयोग कसरी सिर्जना गर्ने।
- टिप्पणीहरू, व्यक्तिगत टिप्पणीहरू, प्रोफाइलहरू हेर्ने जस्ता सुविधाहरू कसरी लागू गर्ने।
- अनुरोध प्रशोधन मार्गहरूको संगठन (रूटिङ)।
Тудушечка
गम्भीरतापूर्वक? Tudushka? ती हजारौं छन्। तर मलाई विश्वास गर्नुहोस्, यो लोकप्रियताको कारण छ।
तपाईंले आधारभूत कुराहरू बुझ्नुभएको छ भनी सुनिश्चित गर्न Tudu एप एउटा उत्कृष्ट तरिका हो। एउटा अनुप्रयोग भेनिला जाभास्क्रिप्टमा र एउटा आफ्नो मनपर्ने फ्रेमवर्कमा लेख्ने प्रयास गर्नुहोस्।
सिक्नुहोस्:
- नयाँ कार्यहरू सिर्जना गर्नुहोस्।
- जाँच गर्नुहोस् कि फिल्डहरू भरिएका छन्।
- फिल्टर कार्यहरू (सम्पन्न, सक्रिय, सबै)। प्रयोग गर्नुहोस्
filterиreduce. - Javascript को आधारभूत कुराहरू बुझ्नुहोस्।
Сортируемый drag and drop список
बुझ्न धेरै उपयोगी .
आउनुहोस् जानौं:
- API ड्र्याग र ड्रप गर्नुहोस्
- रिच UI हरू सिर्जना गर्नुहोस्
Клон мессенджера (нативное приложение)
तपाईले बुझ्नुहुनेछ कि कसरी वेब एप्लिकेसन र नेटिभ एप्लिकेसनले काम गर्छ, जसले तपाईलाई ग्रे मासबाट अलग गर्नेछ।
हामी के अध्ययन गर्नेछौं:
- वेब सकेटहरू (तत्काल सन्देशहरू)
- नेटिभ एप्लिकेसनहरूले कसरी काम गर्छ।
- टेम्प्लेटहरू नेटिभ एपहरूमा कसरी काम गर्छन्।
- नेटिभ अनुप्रयोगहरूमा अनुरोध प्रशोधन मार्गहरू व्यवस्थित गर्दै।
पाठ सम्पादक
टेक्स्ट एडिटरको उद्देश्य भनेको प्रयोगकर्ताहरूको ढाँचालाई मान्य HTML मार्कअपमा रूपान्तरण गर्ने प्रयासलाई कम गर्नु हो। राम्रो पाठ सम्पादकले प्रयोगकर्ताहरूलाई विभिन्न तरिकामा पाठ ढाँचा गर्न अनुमति दिन्छ।
केहि बिन्दुमा, सबैले पाठ सम्पादक प्रयोग गरेका छन्। त्यसैले किन नहोस् ?
Клон Reddit
एक सामाजिक समाचार एकत्रीकरण, वेब सामग्री मूल्याङ्कन र छलफल साइट हो।
Reddit ले मेरो धेरैजसो समय लिन्छ, तर म यसमा ह्याङ्ग आउट गर्न जारी राख्छु। Reddit क्लोन सिर्जना गर्नु प्रोग्रामिङ सिक्ने एक प्रभावकारी तरिका हो (एकै समयमा Reddit ब्राउज गर्दा)।
Reddit ले तपाईंलाई धेरै धनी प्रदान गर्दछ। कुनै पनि सुविधाहरू नछोड्नुहोस् वा कामहरू जथाभावी नगर्नुहोस्। ग्राहकहरु र ग्राहकहरु संग वास्तविक संसारमा, तपाईले अव्यवस्थित रूपमा काम गर्न सक्नुहुन्न, वा तपाईले चाँडै आफ्नो काम गुमाउनुहुनेछ।
स्मार्ट ग्राहकहरूले तुरुन्तै महसुस गर्नेछन् कि काम खराब भइरहेको छ र अरू कसैलाई भेट्टाउनेछ।
Публикация пакета NPM с открытым исходным кодом
यदि तपाइँ जाभास्क्रिप्ट कोड लेख्नुहुन्छ भने, संभावना तपाइँ प्याकेज प्रबन्धक प्रयोग गर्नुहुन्छ। प्याकेज प्रबन्धकले तपाईंलाई अवस्थित कोड पुन: प्रयोग गर्न अनुमति दिन्छ जुन अन्य व्यक्तिहरूले लेखेका र प्रकाशित गरेका छन्।
प्याकेजको पूर्ण विकास चक्र बुझ्नुले धेरै राम्रो अनुभव प्रदान गर्नेछ। कोड प्रकाशित गर्दा तपाईंले जान्न आवश्यक धेरै कुराहरू छन्। तपाईंले सुरक्षा, सिमेन्टिक संस्करण, स्केलेबिलिटी, नामकरण सम्मेलनहरू र मर्मतसम्भार बारे सोच्न आवश्यक छ।
प्याकेज जे पनि हुन सक्छ। यदि तपाइँसँग कुनै विचार छैन भने, तपाइँको आफ्नै Lodash सिर्जना गर्नुहोस् र यसलाई प्रकाशित गर्नुहोस्।
लोडास:
तपाईंले अनलाइन गरेको कुनै कुराले तपाईंलाई अरूभन्दा 10% माथि राख्छ। खुला स्रोत र प्याकेजहरूको बारेमा।
Учебный план freeCodeCamp
freeCodecamp ले धेरै संकलन गरेको छ .
freeCodeCamp एक गैर-लाभकारी संस्था हो। यसमा एक अन्तरक्रियात्मक वेब-आधारित सिकाइ प्लेटफर्म, एक अनलाइन सामुदायिक फोरम, च्याट कोठा, मध्यम प्रकाशनहरू, र स्थानीय संस्थाहरू समावेश छन् जसले वेब विकासलाई सबैको लागि पहुँचयोग्य बनाउन चाहन्छ।
यदि तपाईंले सम्पूर्ण पाठ्यक्रम पूरा गर्न प्रबन्ध गर्नुभयो भने तपाईं आफ्नो पहिलो कामको लागि योग्य हुनुहुनेछ।
Создайте HTTP-сервер с нуля
HTTP प्रोटोकल मुख्य प्रोटोकल मध्ये एक हो जसको माध्यमबाट सामग्री इन्टरनेटमा यात्रा गर्दछ। HTTP सर्भरहरू HTML, CSS, र JS जस्ता स्थिर सामग्रीहरू सेवा गर्न प्रयोग गरिन्छ।
स्क्र्याचबाट HTTP प्रोटोकल लागू गर्न सक्षम हुनुले चीजहरू कसरी अन्तरक्रिया गर्छ भन्ने बारे तपाईंको ज्ञान विस्तार गर्नेछ।
उदाहरणका लागि, यदि तपाइँ NodeJs प्रयोग गर्नुहुन्छ भने, तपाइँलाई थाहा छ कि एक्सप्रेसले HTTP सर्भर प्रदान गर्दछ।
सन्दर्भको लागि, हेर्नुहोस् यदि तपाईं सक्नुहुन्छ:
- कुनै पनि पुस्तकालयहरू प्रयोग नगरी सर्भर सेटअप गर्नुहोस्
- सर्भरले HTML, CSS र JS सामग्रीहरू सेवा गर्नुपर्छ।
- स्क्र्याचबाट राउटर लागू गर्दै
- परिवर्तनहरू निगरानी गर्नुहोस् र सर्भर अपडेट गर्नुहोस्
यदि तपाईलाई थाहा छैन किन, प्रयोग गर्नुहोस् र HTTP सर्भर सिर्जना गर्ने प्रयास गर्नुहोस् स्क्र्याच देखि।
Десктопное приложение для заметок
हामी सबै नोट लिन्छौं, हैन?
नोट एप सिर्जना गरौं। अनुप्रयोगले नोटहरू बचत गर्न र डाटाबेससँग सिङ्क्रोनाइज गर्न आवश्यक छ। Electron, Swift, वा तपाईलाई मनपर्ने र तपाईको प्रणालीको लागि के काम गर्दछ प्रयोग गरेर एउटा नेटिभ एप बनाउनुहोस्।
यसलाई पहिलो चुनौती (पाठ सम्पादक) सँग संयोजन गर्न स्वतन्त्र महसुस गर्नुहोस्।
बोनसको रूपमा, वेब संस्करणसँग आफ्नो डेस्कटप संस्करण सिंक गर्ने प्रयास गर्नुहोस्।
Подкасты (клон Overcast)
पोडकास्ट कसले सुन्दैन?
निम्न कार्यक्षमता संग वेब अनुप्रयोग सिर्जना गर्नुहोस्:
- खाता खोल्नुहोस्
- पोडकास्टहरू खोज्नुहोस्
- मूल्याङ्कन गर्नुहोस् र पोडकास्टहरूको सदस्यता लिनुहोस्
- रोक्नुहोस् र खेल्नुहोस्, गति परिवर्तन गर्नुहोस्, 30 सेकेन्डको लागि अगाडि र पछाडि कार्यहरू।
सुरूवात बिन्दुको रूपमा iTunes API प्रयोग गर्ने प्रयास गर्नुहोस्। यदि तपाईलाई कुनै अन्य स्रोतहरू थाहा छ भने, कृपया टिप्पणीहरूमा पोस्ट गर्नुहोस्।
स्क्रिन क्याप्चर
नमस्ते! म अहिले मेरो स्क्रिन फिल्म गर्दै छु!
एउटा डेस्कटप वा वेब एप बनाउनुहोस् जसले तपाईंलाई आफ्नो स्क्रिन खिच्न र क्लिपलाई यस रूपमा बचत गर्न अनुमति दिन्छ .gif
यहाँ यो कसरी हासिल गर्न।
स्रोतहरू
स्रोत: www.habr.com