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 वर जन्माला आली. आर/लेयर समुदाय हे सामायिक सर्जनशीलतेचे रूपक आहे, जे प्रत्येकजण निर्माता असू शकतो आणि सामान्य कारणासाठी योगदान देऊ शकतो.
तुमचा स्वतःचा लेयर प्रोजेक्ट तयार करताना तुम्ही काय शिकाल:
- JavaScript कॅनव्हास कसे कार्य करते कॅनव्हास कसे चालवायचे हे जाणून घेणे हे अनेक ऍप्लिकेशन्समध्ये एक महत्त्वपूर्ण कौशल्य आहे.
- वापरकर्ता परवानग्यांचे समन्वय कसे करावे. प्रत्येक वापरकर्ता लॉग इन न करता दर 15 मिनिटांनी एक पिक्सेल काढू शकतो.
- कुकी सत्रे तयार करा.
Squoosh
स्क्वॉश हे अनेक प्रगत पर्यायांसह एक इमेज कॉम्प्रेशन अॅप्लिकेशन आहे.
GIF 20 MB
स्क्वॉशची तुमची स्वतःची आवृत्ती तयार करून तुम्ही शिकाल:
- प्रतिमा आकारांसह कसे कार्य करावे
- Drag'n'Drop API च्या मूलभूत गोष्टी जाणून घ्या
- API आणि इव्हेंट श्रोते कसे कार्य करतात ते समजून घ्या
- फाइल्स अपलोड आणि एक्सपोर्ट कसे करावे
टीप: प्रतिमा कंप्रेसर स्थानिक आहे. सर्व्हरला अतिरिक्त डेटा पाठवणे आवश्यक नाही. तुमच्या घरी कंप्रेसर असू शकतो किंवा तुम्ही तुमच्या आवडीनुसार सर्व्हरवर वापरू शकता.
कॅल्क्युलेटर
चला तर? गंभीरपणे? कॅल्क्युलेटर? होय, अगदी, एक कॅल्क्युलेटर. गणित ऑपरेशन्सची मूलभूत माहिती समजून घेणे आणि ते एकत्रितपणे कसे कार्य करतात हे आपले अनुप्रयोग सुलभ करण्यासाठी एक महत्त्वपूर्ण कौशल्य आहे. लवकरच किंवा नंतर तुम्हाला संख्यांचा सामना करावा लागेल आणि जितक्या लवकर तितके चांगले.
तुमचे स्वतःचे कॅल्क्युलेटर तयार करून तुम्ही शिकाल:
- संख्या आणि गणित ऑपरेशन्ससह कार्य करा
- इव्हेंट श्रोते API सह सराव करा
- घटकांची व्यवस्था कशी करावी, शैली समजून घ्या
क्रॉलर (शोध इंजिन)
प्रत्येकाने शोध इंजिन वापरले आहे, मग आपले स्वतःचे का तयार करू नये? माहिती शोधण्यासाठी क्रॉलर्सची आवश्यकता असते. प्रत्येकजण दररोज त्यांचा वापर करतो आणि या तंत्रज्ञानाची आणि तज्ञांची मागणी केवळ कालांतराने वाढेल.
Google शोध इंजिन
तुमचे स्वतःचे शोध इंजिन तयार करून तुम्ही काय शिकाल:
- क्रॉलर्स कसे कार्य करतात
- साइट्सची अनुक्रमणिका कशी करावी आणि रेटिंग आणि प्रतिष्ठेनुसार त्यांची रँक कशी करावी
- डेटाबेसमध्ये अनुक्रमित साइट्स कसे संग्रहित करावे आणि डेटाबेससह कसे कार्य करावे
म्युझिक प्लेयर (Spotify, Apple Music)
प्रत्येकजण संगीत ऐकतो - तो फक्त आपल्या जीवनाचा अविभाज्य भाग आहे. आधुनिक म्युझिक स्ट्रीमिंग प्लॅटफॉर्मचे मूलभूत यांत्रिकी कसे कार्य करते हे चांगल्या प्रकारे समजून घेण्यासाठी एक म्युझिक प्लेयर तयार करूया.
Spotify
तुमचा स्वतःचा म्युझिक स्ट्रीमिंग प्लॅटफॉर्म तयार करून तुम्ही काय शिकाल:
- API सह कसे कार्य करावे. Spotify किंवा Apple Music वरून API वापरा
- पुढील/मागील ट्रॅक कसे खेळायचे, विराम द्या किंवा रिवाइंड कसे करावे
- व्हॉल्यूम कसा बदलायचा
- वापरकर्ता रूटिंग आणि ब्राउझर इतिहास कसे व्यवस्थापित करावे
प्रतिक्रिया वापरून चित्रपट शोध ॲप (हुकसह)
रिॲक्ट वापरून चित्रपट शोध ॲप तयार करणे ही पहिली गोष्ट जी तुम्ही सुरू करू शकता. खाली अंतिम अनुप्रयोग कसा दिसेल याची प्रतिमा आहे:
तुम्ही काय शिकाल
हे ॲप तयार करून, तुम्ही तुलनेने नवीन Hooks API वापरून तुमची प्रतिक्रिया कौशल्ये सुधाराल. उदाहरण प्रकल्प रिॲक्ट घटक, बरेच हुक, एक बाह्य API आणि अर्थातच काही CSS शैली वापरतो.
टेक स्टॅक आणि वैशिष्ट्ये
- हुक सह प्रतिक्रिया
- तयार-प्रतिक्रिया-अनुप्रयोग
- जेएसएक्स
- CSS
कोणतेही क्लासेस न वापरता, हे प्रोजेक्ट तुम्हाला फंक्शनल रिॲक्टमध्ये परिपूर्ण प्रवेश बिंदू देतात आणि 2020 मध्ये तुम्हाला नक्कीच मदत करतील. आपण शोधू शकता . सूचनांचे अनुसरण करा किंवा ते स्वतःचे बनवा.
Vue सह चॅट ॲप
तुमच्यासाठी आणखी एक उत्तम प्रकल्प म्हणजे माझी आवडती JavaScript लायब्ररी वापरून चॅट ॲप तयार करणे: VueJS. अनुप्रयोग असे काहीतरी दिसेल:
तुम्ही काय शिकाल
या ट्युटोरियलमध्ये, तुम्ही सुरवातीपासून Vue ॲप कसे बनवायचे ते शिकाल - घटक तयार करणे, स्थिती हाताळणे, मार्ग तयार करणे, तृतीय-पक्ष सेवांशी कनेक्ट करणे आणि प्रमाणीकरण हाताळणे.
टेक स्टॅक आणि वैशिष्ट्ये
- व्ह्यू
- vuex
- व्ह्यू राउटर
- Vue CLI
- पुशर
- CSS
Vue सह प्रारंभ करण्यासाठी किंवा 2020 मध्ये विकासात जाण्यासाठी तुमची विद्यमान कौशल्ये सुधारण्यासाठी हा खरोखर एक चांगला प्रकल्प आहे. आपण शोधू शकता .
अँगुलर 8 सह सुंदर हवामान ॲप
हे उदाहरण तुम्हाला अँगुलर 8 वापरून एक सुंदर हवामान ॲप तयार करण्यात मदत करेल:
तुम्ही काय शिकाल
हा प्रकल्प तुम्हाला सुरवातीपासून ॲप्लिकेशन्स बनवण्यामध्ये मौल्यवान कौशल्ये शिकवेल - डिझाईन ते डेव्हलपमेंट, डिप्लॉयमेंट-रेडी ॲप्लिकेशनपर्यंत.
टेक स्टॅक आणि वैशिष्ट्ये
- कोणीय 8
- फायरबेज
- सर्व्हर साइड रेंडरिंग
- ग्रिड आणि फ्लेक्सबॉक्ससह CSS
- मोबाइल अनुकूल आणि अनुकूलता
- गडद मोड
- सुंदर इंटरफेस
या सर्वसमावेशक प्रकल्पाबद्दल मला खरोखर जे आवडते ते म्हणजे तुम्ही एकाकी गोष्टींचा अभ्यास करू नका. त्याऐवजी, तुम्ही संपूर्ण विकास प्रक्रिया, डिझाइनपासून अंतिम उपयोजनापर्यंत शिकता.
Svelte वापरून टू-डू ऍप्लिकेशन
Svelte घटक-आधारित दृष्टिकोनावर नवीन मुलासारखे आहे - किमान प्रतिक्रिया, Vue आणि Angular सारखे. आणि हे 2020 साठी सर्वात लोकप्रिय नवीन उत्पादनांपैकी एक आहे.
टू-डू ॲप्स हा सर्वात चर्चेचा विषय असेलच असे नाही, परंतु ते तुम्हाला तुमची Svelte कौशल्ये सुधारण्यात खरोखर मदत करेल. हे असे दिसेल:
तुम्ही काय शिकाल
हे ट्यूटोरियल तुम्हाला सुरुवातीपासून शेवटपर्यंत Svelte 3 वापरून ॲप्लिकेशन कसे तयार करायचे ते दाखवेल. तुम्ही घटक, स्टाइलिंग आणि इव्हेंट हँडलर वापराल
टेक स्टॅक आणि वैशिष्ट्ये
- Svelte 3
- घटक
- CSS सह शैली
- ES 6 वाक्यरचना
तेथे बरेच चांगले Svelte स्टार्टर प्रकल्प नाहीत, म्हणून मला सापडले .
Next.js वापरून ई-कॉमर्स ॲप
बॉक्सच्या बाहेर सर्व्हर-साइड रेंडरिंगला समर्थन देणारे React ॲप्लिकेशन्स तयार करण्यासाठी Next.js सर्वात लोकप्रिय फ्रेमवर्क आहे.
यासारखे दिसणारे ई-कॉमर्स ॲप्लिकेशन कसे तयार करायचे हे हा प्रकल्प तुम्हाला दाखवेल:
तुम्ही काय शिकाल
या प्रकल्पात, तुम्ही Next.js सह कसे विकसित करायचे ते शिकू शकाल—नवीन पृष्ठे आणि घटक तयार करा, डेटा काढा आणि शैली आणि नेक्स्ट ॲप्लिकेशन तैनात करा.
टेक स्टॅक आणि वैशिष्ट्ये
- पुढील.जे.एस
- घटक आणि पृष्ठे
- डेटा सॅम्पलिंग
- शैलीकरण
- प्रकल्प उपयोजन
- SSR आणि SPA
काहीतरी नवीन शिकण्यासाठी ई-कॉमर्स ॲपसारखे वास्तविक-जगाचे उदाहरण असणे नेहमीच छान असते. आपण करू शकता .
Nuxt.js सह संपूर्ण बहुभाषिक ब्लॉग
Nuxt.js हे Vue साठी आहे, React साठी Next.js काय आहे: सर्व्हर-साइड रेंडरिंग आणि सिंगल-पेज ऍप्लिकेशन्सची शक्ती एकत्र करण्यासाठी एक उत्तम फ्रेमवर्क
तुम्ही तयार करू शकता तो अंतिम अनुप्रयोग असे दिसेल:
तुम्ही काय शिकाल
या नमुना प्रकल्पामध्ये, तुम्ही Nuxt.js वापरून संपूर्ण वेबसाइट कशी तयार करावी ते शिकू शकाल, सुरुवातीच्या सेटअपपासून ते अंतिम उपयोजनापर्यंत.
हे Nuxt ने ऑफर केलेल्या अनेक छान वैशिष्ट्यांचा लाभ घेते, जसे की पृष्ठे आणि घटक आणि SCSS सह शैली.
टेक स्टॅक आणि वैशिष्ट्ये
- Nuxt.js
- घटक आणि पृष्ठे
- स्टोरीब्लॉक मॉड्यूल
- हॅगफिश
- राज्य व्यवस्थापनासाठी Vuex
- स्टाइलिंगसाठी SCSS
- Nuxt Middlewares
, ज्यामध्ये अनेक उत्तम Nuxt.js वैशिष्ट्ये समाविष्ट आहेत. मला वैयक्तिकरित्या Nuxt सोबत काम करायला आवडते त्यामुळे तुम्ही ते वापरून पहा कारण ते तुम्हाला उत्कृष्ट Vue विकासक देखील बनवेल.
Gatsby सह ब्लॉग
Gatsby प्रतिक्रिया आणि GraphQL वापरून एक उत्कृष्ट स्थिर साइट जनरेटर आहे. हा प्रकल्पाचा परिणाम आहे:
तुम्ही काय शिकाल
या ट्युटोरियलमध्ये, तुम्ही React आणि GraphQL वापरून तुमचे स्वतःचे लेख लिहिण्यासाठी वापरत असलेला ब्लॉग तयार करण्यासाठी गॅट्सबी कसा वापरायचा ते शिकाल.
टेक स्टॅक आणि वैशिष्ट्ये
- गॅट्सबी
- प्रतिक्रिया द्या
- आलेख
- प्लगइन आणि थीम
- MDX/मार्कडाउन
- CSS बूटस्ट्रॅप
- नमुने
तुम्हाला कधी ब्लॉग सुरू करायचा असेल तर, React आणि GraphQL वापरून ते कसे बनवायचे.
मी असे म्हणत नाही की वर्डप्रेस ही एक वाईट निवड आहे, परंतु गॅट्सबीसह तुम्ही रिॲक्ट वापरून उच्च-कार्यक्षमता वेबसाइट तयार करू शकता - जे एक आश्चर्यकारक संयोजन आहे.
ग्रिडसमसह ब्लॉग
Vue साठी ग्रिडसम... ठीक आहे, आमच्याकडे नेक्स्ट/नक्स्ट सोबत हे आधीच होते.
पण ग्रिडसम आणि गॅट्सबीसाठीही हेच आहे. दोघेही त्यांचा डेटा स्तर म्हणून GraphQL वापरतात, परंतु Gridsome VueJS वापरतात. हे देखील एक आश्चर्यकारक स्थिर साइट जनरेटर आहे जे आपल्याला उत्कृष्ट ब्लॉग तयार करण्यात मदत करेल:
तुम्ही काय शिकाल
हा प्रकल्प तुम्हाला Gridsome, GraphQL आणि Markdown सह प्रारंभ करण्यासाठी एक साधा ब्लॉग कसा तयार करायचा हे शिकवेल. Netlify द्वारे अनुप्रयोग कसा उपयोजित करायचा हे देखील यात समाविष्ट आहे.
टेक स्टॅक आणि वैशिष्ट्ये
- काजळ
- व्ह्यू
- आलेख
- चिन्हांकित करा
- नेटलिफाई करा
हे नक्कीच सर्वात व्यापक ट्यूटोरियल नाही, परंतु यात ग्रिडसमच्या मूलभूत संकल्पना समाविष्ट आहेत आणि .
Quasar वापरून साउंडक्लाउड सारखा ऑडिओ प्लेयर
Quasar हे आणखी एक Vue फ्रेमवर्क आहे जे मोबाईल ऍप्लिकेशन तयार करण्यासाठी वापरले जाऊ शकते. या प्रोजेक्टमध्ये तुम्ही ऑडिओ प्लेयर ॲप्लिकेशन तयार कराल, उदाहरणार्थ:
तुम्ही काय शिकाल
इतर प्रकल्प मुख्यत्वे वेब ॲप्लिकेशनवर केंद्रित असताना, हे तुम्हाला Vue आणि Quasar फ्रेमवर्क वापरून मोबाइल ॲप्लिकेशन कसे तयार करायचे ते दाखवेल.
तुमच्याकडे Android स्टुडिओ/एक्सकोड कॉन्फिगर केलेले कॉर्डोव्हा आधीपासूनच चालू असले पाहिजे. नसल्यास, मॅन्युअलमध्ये 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-фреймворк, React или Vue.
तुम्ही शिकाल:
- Как передвигаются элементы
- Как определить какие клавиши нажимать
- Как определить момент столкновения
- Вы можете не останавливаться на достигнутом и добавить управление движением призраков
Пример этого проекта вы найдете GitHub
वापरकर्ता व्यवस्थापन
प्रकल्प GitHub
Создание приложения типа CRUD для администрирования пользователей научит вас основам разработки. Это особенно полезно начинающим разработчикам.
तुम्ही शिकाल:
- Что такое маршрутизация
- Как обращаться с формами для ввода данных и проверять что ввел пользователь
- Как работать с базой данных — создавать, читать, обновлять и удалять действия
Проверка погоды в вашем местоположении
प्रकल्प GitHub
Если вы хотите создавать приложения, начните с приложения определения погоды. Этот проект можно выполнить с использованием Swift.
Помимо получения опыта по созданию приложения, вы узнаете:
- Как работать с API
- Как использовать геолокацию
- Cделайте приложение более динамичным, добавив текстовый ввод. В нем пользователи смогут ввести свое местоположение, чтобы проверить погоду в определенном месте.
Вам понадобится API. Для получения данных о погоде используйте API OpenWeather. Больше информации об API OpenWeather.
Окно чата
Мое окно чата в действии, открытое в двух вкладках браузера
Создание окна чата это идеальный способ начать работу с сокетами. Выбор технического стека огромен. Отлично подойдет Node.js, например.
Вы узнаете, как работают сокеты и как их реализовать. Это главное преимущество этого проекта.
Если вы разработчик Laravel, который хочет работать с сокетами, прочитайте мою
गिटलाब सीआय
Если вы новичок в непрерывной интеграции (CI), поиграйтесь с GitLab CI. Настройте несколько сред и попробуйте запустить пару тестов. Это не очень сложный проект, но я уверен, что вы многому научитесь благодаря ему. Многие команды разработчиков в настоящее время используют CI. Уметь им пользоваться полезно.
तुम्ही शिकाल:
- Что такое GitLab CI
- Как сконфигурировать
.gitlab-ci.yml, который говорит пользователю GitLab, что делать - Как деплоить в других средах
Анализатор сайтов
Сделайте скрапер, который анализирует семантику веб-сайтов и создает их рейтинг. Например, вы можете проверить наличие недостающих alt-тегов на изображениях. Или проверить есть ли на странице мета теги SEO. Скрапер можно создать и без пользовательского интерфейса.
तुम्ही शिकाल:
- Как работает скрапер
- Как создавать DOM селекторы
- Как писать алгоритм
- Если не хотите останавливаться на достигнутом, создайте пользовательский интерфейс. Можно также составить отчет о каждом проверенном вами веб-сайте.
Определение настроений в социальных сетях
Определение настроений в социальных сетях это отличный способ познакомиться с машинным обучением.
Вы можете начать с анализа только одной социальной сети. Обычно все начинают с Twitter.
Если у вас уже есть опыт работы с машинным обучением, попытайтесь собрать данные разных социальных сетей и объединить их.
तुम्ही शिकाल:
- Что представляет из себя машинное обучение
Клон Trello
तुम्ही काय शिकाल:
- विनंती प्रक्रिया मार्गांची संघटना (राउटिंग).
- ड्रॅग आणि ड्रॉप करा.
- नवीन वस्तू (बोर्ड, याद्या, कार्ड) कसे तयार करावे.
- इनपुट डेटावर प्रक्रिया करणे आणि तपासणे.
- क्लायंटच्या बाजूने: स्थानिक स्टोरेज कसे वापरायचे, स्थानिक स्टोरेजमध्ये डेटा कसा सेव्ह करायचा, स्थानिक स्टोरेजमधील डेटा कसा वाचायचा.
- सर्व्हरच्या बाजूने: डेटाबेस कसा वापरायचा, डेटाबेसमध्ये डेटा कसा सेव्ह करायचा, डेटाबेसमधून डेटा कसा वाचायचा.
, React+Redux मध्ये बनवले आहे.
Панель админа
एक साधा CRUD अनुप्रयोग, मूलभूत गोष्टी शिकण्यासाठी आदर्श. चला जाणून घेऊया:
- वापरकर्ते तयार करा, वापरकर्ते व्यवस्थापित करा.
- डेटाबेसशी संवाद साधा - वापरकर्ते तयार करा, वाचा, संपादित करा, हटवा.
- इनपुट सत्यापित करणे आणि फॉर्मसह कार्य करणे.
Трекер криптовалют (нативное мобильное приложение)
काहीही: स्विफ्ट, ऑब्जेक्टिव्ह-सी, रिअॅक्ट नेटिव्ह, जावा, कोटलिन.
चला अभ्यास करू:
- मूळ अनुप्रयोग कसे कार्य करतात.
- API मधून डेटा कसा पुनर्प्राप्त करायचा.
- मूळ पृष्ठ लेआउट कसे कार्य करतात.
- मोबाइल सिम्युलेटरसह कसे कार्य करावे.
. आपल्याला काहीतरी चांगले आढळल्यास, टिप्पण्यांमध्ये लिहा.
तुम्हाला स्वारस्य असल्यास, ते येथे आहे .
Настроить собственный конфиг webpack с нуля
तांत्रिकदृष्ट्या, हा अनुप्रयोग नाही, परंतु वेबपॅक आतून कसे कार्य करते हे समजून घेणे हे एक अतिशय उपयुक्त कार्य आहे. आता ते “ब्लॅक बॉक्स” नसून समजण्याजोगे साधन असेल.
आवश्यकता:
- es7 ते es5 (मूलभूत) संकलित करा.
- jsx ते js - किंवा - .vue ते .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 ड्रॅग आणि ड्रॉप करा
- समृद्ध UI तयार करा
Клон мессенджера (нативное приложение)
वेब अॅप्लिकेशन्स आणि नेटिव्ह अॅप्लिकेशन्स दोन्ही कसे कार्य करतात हे तुम्हाला समजेल, जे तुम्हाला ग्रे मासपासून वेगळे करेल.
आम्ही काय अभ्यास करू:
- वेब सॉकेट्स (झटपट संदेश)
- मूळ अनुप्रयोग कसे कार्य करतात.
- मूळ अनुप्रयोगांमध्ये टेम्पलेट कसे कार्य करतात.
- नेटिव्ह ऍप्लिकेशन्समध्ये विनंती प्रक्रिया मार्ग आयोजित करणे.
मजकूर संपादक
मजकूर संपादकाचा उद्देश त्यांच्या स्वरूपनाला वैध HTML मार्कअपमध्ये रूपांतरित करण्याचा प्रयत्न करणाऱ्या वापरकर्त्यांचा प्रयत्न कमी करणे हा आहे. एक चांगला मजकूर संपादक वापरकर्त्यांना वेगवेगळ्या प्रकारे मजकूर स्वरूपित करण्याची परवानगी देतो.
कधीतरी, प्रत्येकाने मजकूर संपादक वापरला आहे. तर का नाही ?
Клон Reddit
एक सामाजिक बातम्या एकत्रीकरण, वेब सामग्री रेटिंग आणि चर्चा साइट आहे.
Reddit माझा बहुतेक वेळ घेते, परंतु मी त्यावर हँग आउट करणे सुरू ठेवतो. Reddit क्लोन तयार करणे हा प्रोग्रामिंग शिकण्याचा एक प्रभावी मार्ग आहे (एकाच वेळी Reddit ब्राउझ करत असताना).
Reddit तुम्हाला खूप श्रीमंत प्रदान करते. कोणतीही वैशिष्ट्ये सोडू नका किंवा बेजबाबदारपणे गोष्टी करू नका. क्लायंट आणि ग्राहकांसह वास्तविक जगात, तुम्ही अव्यवस्थितपणे काम करू शकत नाही किंवा तुम्ही पटकन तुमची नोकरी गमावाल.
स्मार्ट क्लायंटना लगेच लक्षात येईल की काम खराब केले जात आहे आणि ते दुसरे कोणीतरी शोधतील.
Публикация пакета NPM с открытым исходным кодом
तुम्ही Javascript कोड लिहिल्यास, तुम्ही पॅकेज मॅनेजर वापरण्याची शक्यता आहे. पॅकेज मॅनेजर तुम्हाला इतर लोकांनी लिहिलेला आणि प्रकाशित केलेला विद्यमान कोड पुन्हा वापरण्याची परवानगी देतो.
पॅकेजचे संपूर्ण विकास चक्र समजून घेणे खूप चांगला अनुभव देईल. कोड प्रकाशित करताना तुम्हाला अनेक गोष्टी माहित असणे आवश्यक आहे. तुम्हाला सुरक्षा, सिमेंटिक व्हर्जनिंग, स्केलेबिलिटी, नेमिंग कन्व्हेन्शन्स आणि मेंटेनन्स बद्दल विचार करणे आवश्यक आहे.
पॅकेज काहीही असू शकते. तुमच्याकडे कल्पना नसल्यास, तुमचा स्वतःचा Lodash तयार करा आणि प्रकाशित करा.
लोडश:
तुम्ही ऑनलाइन केलेली एखादी गोष्ट तुम्हाला इतरांपेक्षा 10% वर ठेवते. मुक्त स्रोत आणि पॅकेजेसबद्दल.
Учебный план freeCodeCamp
freeCodecamp ने भरपूर गोळा केले आहे .
freeCodeCamp ही ना-नफा संस्था आहे. यात परस्परसंवादी वेब-आधारित लर्निंग प्लॅटफॉर्म, ऑनलाइन समुदाय मंच, चॅट रूम, मध्यम प्रकाशने आणि स्थानिक संस्था यांचा समावेश आहे ज्यांना वेब डेव्हलपमेंट शिकणे प्रत्येकासाठी प्रवेशयोग्य बनवण्याचा हेतू आहे.
तुम्ही संपूर्ण अभ्यासक्रम पूर्ण करण्यात व्यवस्थापित केल्यास तुम्ही तुमच्या पहिल्या नोकरीसाठी अधिक पात्र असाल.
Создайте HTTP-сервер с нуля
HTTP प्रोटोकॉल हा मुख्य प्रोटोकॉलपैकी एक आहे ज्याद्वारे सामग्री इंटरनेटवर प्रवास करते. एचटीटीपी सर्व्हरचा वापर एचटीएमएल, सीएसएस आणि जेएस सारख्या स्थिर सामग्रीसाठी केला जातो.
सुरवातीपासून HTTP प्रोटोकॉल लागू करण्यात सक्षम असल्यामुळे गोष्टी कशा परस्परसंवाद करतात याविषयी तुमचे ज्ञान वाढवेल.
उदाहरणार्थ, जर तुम्ही NodeJs वापरत असाल, तर तुम्हाला माहित आहे की एक्सप्रेस HTTP सर्व्हर प्रदान करते.
संदर्भासाठी, तुम्ही हे करू शकता का ते पहा:
- कोणतीही लायब्ररी न वापरता सर्व्हर सेट करा
- सर्व्हरने HTML, CSS आणि JS सामग्री प्रदान करणे आवश्यक आहे.
- सुरवातीपासून राउटरची अंमलबजावणी करणे
- बदलांचे निरीक्षण करा आणि सर्व्हर अद्यतनित करा
तुम्हाला का माहित नसेल तर वापरा आणि HTTP सर्व्हर तयार करण्याचा प्रयत्न करा शून्यापासून.
Десктопное приложение для заметок
आम्ही सर्व नोट्स घेतो, नाही का?
चला नोट्स अॅप बनवू. अनुप्रयोगास नोट्स जतन करणे आणि डेटाबेससह समक्रमित करणे आवश्यक आहे. इलेक्ट्रॉन, स्विफ्ट किंवा तुम्हाला जे आवडते आणि तुमच्या सिस्टमसाठी काय काम करते ते वापरून मूळ अॅप तयार करा.
हे पहिल्या आव्हानासह (टेक्स्ट एडिटर) एकत्र करण्यास मोकळ्या मनाने.
बोनस म्हणून, तुमची डेस्कटॉप आवृत्ती वेब आवृत्तीसह समक्रमित करण्याचा प्रयत्न करा.
Подкасты (клон Overcast)
पॉडकास्ट कोण ऐकत नाही?
खालील कार्यक्षमतेसह एक वेब अनुप्रयोग तयार करा:
- खाते तयार करा
- पॉडकास्ट शोधा
- पॉडकास्टला रेट करा आणि सदस्यता घ्या
- थांबा आणि प्ले करा, वेग बदला, 30 सेकंदांसाठी फॉरवर्ड आणि बॅकवर्ड फंक्शन्स.
प्रारंभ बिंदू म्हणून iTunes API वापरून पहा. तुम्हाला इतर कोणत्याही संसाधनांबद्दल माहिती असल्यास, कृपया टिप्पण्यांमध्ये पोस्ट करा.
स्क्रीन कॅप्चर
नमस्कार! मी आत्ता माझ्या स्क्रीनवर चित्रीकरण करत आहे!
एक डेस्कटॉप किंवा वेब अॅप तयार करा जे तुम्हाला तुमची स्क्रीन कॅप्चर करण्यास आणि क्लिप म्हणून सेव्ह करण्यास अनुमती देते .gif
येथे हे कसे साध्य करावे.
स्त्रोत
स्त्रोत: www.habr.com