फ्रन्ट-एन्ड डोजो: विकासकर्ता सीपहरू तालिम दिने परियोजनाहरू (५ नयाँ + ४३ पुरानो)

1. धारणा क्लोन

नेशन एप्लिकेसन धेरैले मन पराउँछन्; यसले तपाइँलाई तपाइँको कार्यप्रवाह अप्टिमाइज गर्न, कागजातहरूसँग काम गर्न, कार्यहरू अनुसूची गर्न र यन्त्रहरू बीच डेटा सिङ्क्रोनाइज गर्न अनुमति दिन्छ।

www.notion.so

तपाईंले धारणा क्लोन सिर्जना गरेर के सिक्नुहुनेछ:

• HTML ड्र्याग एण्ड ड्रप एपीआई। प्रयोगकर्ताले "माउसले समात्न" सक्छ तान्न सकिने तत्व र यसलाई मा राख्नुहोस् छोड्न मिल्ने क्षेत्र।
• कसरी आफ्नो कम्प्युटर र स्मार्टफोन बीच वास्तविक समयमा डाटा सिङ्क्रोनाइज गर्ने।
• हामी प्रयोगकर्ताहरूलाई रेकर्डहरू सिर्जना गर्न, पढ्न, अद्यावधिक गर्न र मेटाउन अनुमति दिन्छौं, यसरी CRUD सीपहरू तालिम दिन्छौं।

लेख एडिसन सफ्टवेयरको समर्थनमा अनुवाद गरिएको थियो, जुन अनुप्रयोगहरू र वेबसाइटहरू विकास गर्दछर स्टार्टअपमा लगानी गर्छ.

2. Repl.it क्लोन

Repl.it वास्तविक-समय सहयोगी कोड सम्पादनको लागि एक उपकरण हो। तपाईं धेरै भाषाहरू छनौट गर्न सक्नुहुन्छ: JavaScript, Python, Go र कोड सिधै ब्राउजरमा चलाउनुहोस्। द्रुत डेमो र कोड अन्तर्वार्ताको लागि धेरै उपयोगी।

repl.it

तपाईंले Repl.it क्लोन सिर्जना गरेर के सिक्नुहुनेछ:

• ब्राउजर (क्लायन्ट-साइड) मा कोड (सर्भर-साइड) कसरी चलाउने र कार्यान्वयन गर्ने।
• इनपुट डेटा (स्रोत कोड) पढ्नुहोस् र कार्यान्वयन परिणाम प्रदर्शन गर्नुहोस्।
• कसरी वेबमा फाइलहरू र फोल्डरहरू सिर्जना गर्ने र परिणामहरू बचत गर्ने।
• कोड सिन्ट्याक्स कसरी हाइलाइट गर्ने।

3. गुगल फोटो क्लोन

Google Photos तस्बिरहरू भण्डारण र साझेदारी गर्ने सेवा हो।
कुनै पनि आधुनिक तस्बिर अनुप्रयोगले आधारभूत कार्यहरू गर्न सक्छ: अपलोड, क्रप, आदि। मानिसहरू आफ्नै अवतारहरू सिर्जना गर्न र बिरालाहरूको फोटोहरू साझेदारी गर्न चाहन्छन्, त्यसैले तपाईंले छविहरूसँग काम गर्न सक्षम हुन आवश्यक छ।

www.google.com/photos/about

तपाईंले गुगल फोटो क्लोन सिर्जना गरेर के सिक्नुहुनेछ:

• कसरी फोन, ट्याब्लेट, ल्यापटप र विशाल टिभी स्क्रिनहरूमा प्रतिक्रियाशील छविहरू सिर्जना गर्ने।
• छवि अपलोडहरू, विशेष गरी ठूला छविहरू (>1MB) र बल्क अपलोडहरू कसरी ह्यान्डल गर्ने।
• थम्बनेलका लागि छवि फाइलहरू प्रशोधन गर्नुहोस्, क्रप गर्नुहोस् र फोटोहरू रिसाइज गर्नुहोस् वा ग्यालरी खोल्दा।
• बोनस: क्लाउड वा स्थानीय डाटाबेसमा छविहरू कसरी भण्डारण गर्ने।

4. Gifsky क्लोन

गिफस्की प्रकार्यहरू प्रयोग गरेर भिडियोलाई GIF मा रूपान्तरण गर्दछpngquant कुशल क्रस-फ्रेम प्यालेटहरू र टेम्पोरल एन्टि-अलियासिङका लागि। परिणाम प्रति फ्रेम हजारौं फूलहरू भएको GIF हो।

gif.ski

तपाईंले Gifski क्लोन सिर्जना गरेर के सिक्नुहुनेछ:

• कसरी भिडियो फाइलहरू (.mp4 मा .gif) रूपान्तरण गर्ने।
• ड्र्याग एण्ड ड्रप HTML API कसरी प्रयोग गर्ने।
• छवि अनुकूलन र प्रशोधन कसरी काम गर्दछ।

नोट: Gifsky एक खुला स्रोत परियोजना हो र GitHub मा छ!

5. क्रिप्टोकरन्सी दरहरू निगरानी गर्दै

नेटिभ क्रिप्टोकरन्सी ट्रयाकर प्रतिक्रिया दिनुहोस्

तपाईंले मुद्रा दर ट्र्याकर सिर्जना गरेर के सिक्नुहुनेछ:

• API सँग कसरी काम गर्ने र API बाट टाढैबाट डाटा प्राप्त गर्ने।
• सूचीको रूपमा डेटा कसरी प्रदर्शन गर्ने।
• बोनस: यदि तपाइँ इच्छुक हुनुहुन्छ भने, मैले भर्खरै लेखेको छु मूल्य ट्र्याकर सिर्जना गर्न ट्यूटोरियल React Native सँग क्रिप्टोकरन्सीको लागि।

नोट: यहाँ GitHub उदाहरण भण्डार.

अघिल्लो प्रकाशनहरूबाट परियोजनाहरूको चयन।

पत्र

www.reddit.com/r/layer

लेयर एउटा समुदाय हो जहाँ सबैले साझा "बोर्ड" मा पिक्सेल कोर्न सक्छन्। मूल विचार Reddit मा जन्म भएको थियो। r/layer समुदाय साझा रचनात्मकताको लागि एक रूपक हो, कि सबैजना एक सिर्जनाकर्ता हुन सक्छन् र साझा कारणमा योगदान गर्न सक्छन्।

तपाईको आफ्नै लेयर प्रोजेक्ट सिर्जना गर्दा तपाईले के सिक्नुहुनेछ:

• JavaScript क्यानभासले कसरी काम गर्छ क्यानभास कसरी सञ्चालन गर्ने भन्ने कुरा थाहा पाउनु धेरै अनुप्रयोगहरूमा एउटा महत्वपूर्ण सीप हो।
• प्रयोगकर्ता अनुमतिहरू कसरी समन्वय गर्ने। प्रत्येक प्रयोगकर्ताले लगइन नगरी प्रत्येक 15 मिनेटमा एक पिक्सेल कोर्न सक्छ।
• कुकी सत्रहरू सिर्जना गर्नुहोस्।

स्क्वुश

squoosh.app

Squoosh धेरै उन्नत विकल्पहरूको साथ छवि सङ्कुचन अनुप्रयोग हो।

GIF २० एमबी

Squosh को आफ्नै संस्करण सिर्जना गरेर तपाईंले सिक्नुहुनेछ:

• छवि आकार संग कसरी काम गर्ने
• Drag'n'Drop API को आधारभूत कुराहरू जान्नुहोस्
• API र घटना श्रोताहरूले कसरी काम गर्छन् भनेर बुझ्नुहोस्
• फाइलहरू कसरी अपलोड र निर्यात गर्ने

नोट: छवि कम्प्रेसर स्थानीय छ। सर्भरमा थप डाटा पठाउन आवश्यक छैन। तपाईं घरमा कम्प्रेसर हुन सक्नुहुन्छ, वा तपाईं यसलाई सर्भरमा प्रयोग गर्न सक्नुहुन्छ, तपाईंको छनौट।

क्यालकुलेटर

आउनुहोस्? गम्भीरतापूर्वक? क्याल्कुलेटर? हो, ठ्याक्कै, एक क्याल्कुलेटर। गणित सञ्चालनका आधारभूत कुराहरू बुझ्न र तिनीहरूले कसरी सँगै काम गर्छन् तपाइँको अनुप्रयोगहरू सरल बनाउनको लागि एक महत्वपूर्ण सीप हो। ढिलो वा चाँडो तपाईले संख्याहरूसँग व्यवहार गर्नुपर्नेछ र चाँडो राम्रो।

jarodburchill.github.io/CalculatorReactApp

तपाईंको आफ्नै क्यालकुलेटर सिर्जना गरेर तपाईंले सिक्नुहुनेछ:

• संख्या र गणित सञ्चालन संग काम गर्नुहोस्
• घटना श्रोता 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 र यसको साथ तत्वहरू कसरी आकर्षित गर्ने

यो छ तपाईं विश्व जनसंख्या डाटा पाउन सक्नुहुन्छ। तिनीहरू वर्ष द्वारा क्रमबद्ध छन्।

ट्विटर हार्ट एनिमेसन

2016 मा फिर्ता, ट्विटरले आफ्नो ट्वीटहरूको लागि यो अद्भुत एनिमेसन प्रस्तुत गर्‍यो। 2019 को रूपमा, यो अझै पनि भाग देखिन्छ, त्यसोभए किन आफैं सिर्जना नगर्ने?

तपाईंले के सिक्नुहुनेछ:

• CSS विशेषतासँग काम गर्नुहोस् keyframes
• HTML तत्वहरू हेरफेर र एनिमेट गर्नुहोस्
• JavaScript, HTML र CSS जोड्नुहोस्

खोजीयोग्य GitHub भण्डारहरू

यहाँ केहि फैंसी छैन - GitHub भण्डारहरू केवल एक महिमा सूची हो।
लक्ष्य भनेको भण्डारहरू प्रदर्शन गर्नु र प्रयोगकर्तालाई तिनीहरूलाई फिल्टर गर्न अनुमति दिनु हो। प्रयोग गर्नुहोस् आधिकारिक GitHub API प्रत्येक प्रयोगकर्ताको लागि भण्डारहरू प्राप्त गर्न।

GitHub प्रोफाइल पृष्ठ - github.com/indreklasn

तपाईंले के सिक्नुहुनेछ:

• API बाट डाटा प्राप्त गर्नुहोस्
• API बाट डेटा प्रदर्शन गर्नुहोस्
• फिल्टर गर्नुहोस् र प्रत्येक खोजको लागि सान्दर्भिक डेटा देखाउनुहोस्
• ऐच्छिक: यदि तपाईं चुनौतीको लागि तयार हुनुहुन्छ भने, प्रयोग गर्नुहोस् एपीआई v4, GraphQL प्रयोग गरेर निर्मित। यदि तपाइँ GraphQL सिक्न चाहनुहुन्छ भने, मेरो अघिल्लो लेखहरूमा जानुहोस्.

Reddit शैली कुराकानी

कुराकानीहरू तिनीहरूको सरलता र प्रयोगको सजिलोको कारण संचारको लोकप्रिय माध्यम हो। तर के वास्तवमा आधुनिक च्याट कोठाहरू इन्धन गर्छ? वेबसकेटहरू!

तपाईंले के सिक्नुहुनेछ:

• WebSockets, वास्तविक समय सञ्चार र डाटा अपडेटहरू प्रयोग गर्नुहोस्
• प्रयोगकर्ता पहुँच स्तरहरूसँग काम गर्नुहोस् (उदाहरणका लागि, च्याट च्यानलको मालिकको भूमिका हुन्छ admin, र कोठामा अन्य - user)
• प्रशोधन गर्नुहोस् र फारमहरू मान्य गर्नुहोस् - सम्झनुहोस्, सन्देश पठाउनको लागि च्याट विन्डो हो input
• विभिन्न च्याटहरू सिर्जना गर्नुहोस् र सामेल हुनुहोस्
• व्यक्तिगत सन्देशहरूसँग काम गर्नुहोस्। प्रयोगकर्ताहरूले अन्य प्रयोगकर्ताहरूसँग निजी रूपमा च्याट गर्न सक्छन्। अनिवार्य रूपमा, तपाईंले दुई प्रयोगकर्ताहरू बीच वेबसकेट जडान स्थापना गर्नुहुनेछ।

स्ट्राइप शैली नेभिगेसन

के यो नेभिगेसन अद्वितीय बनाउँछ कि पपओभर कन्टेनर सामग्री फिट गर्न रूपान्तरण। नयाँ पपओभर खोल्ने र बन्द गर्ने परम्परागत व्यवहारको तुलनामा यो संक्रमणको सुन्दरता छ।

तपाईंले के सिक्नुहुनेछ:

• ट्रान्जिसनको साथ 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 चयनकर्ताहरू सिर्जना गर्ने
• एल्गोरिदम कसरी लेख्ने
• यदि तपाइँ त्यहाँ रोक्न चाहनुहुन्न भने, प्रयोगकर्ता इन्टरफेस सिर्जना गर्नुहोस्। तपाईंले जाँच गर्नुभएको प्रत्येक वेबसाइटमा रिपोर्ट पनि सिर्जना गर्न सक्नुहुन्छ।

सामाजिक सञ्जालहरूमा भावना पत्ता लगाउने

स्रोत

सामाजिक सञ्जालमा भावना पत्ता लगाउने मेसिन लर्निङमा परिचय गराउने उत्कृष्ट तरिका हो।

तपाईं केवल एक सामाजिक सञ्जाल विश्लेषण गरेर सुरू गर्न सक्नुहुन्छ। सबैजना सामान्यतया ट्विटरबाट सुरु हुन्छ।

यदि तपाईंसँग पहिले नै मेसिन लर्निङको अनुभव छ भने, विभिन्न सामाजिक सञ्जालहरूबाट डाटा सङ्कलन गरी तिनीहरूलाई संयोजन गर्ने प्रयास गर्नुहोस्।

तपाइँ सिक्नुहुनेछ:

• मेसिन लर्निङ भनेको के हो

ट्रेलो क्लोन

Indrek Lasn बाट Trello क्लोन।

तपाईले के सिक्नुहुनेछ:

• अनुरोध प्रशोधन मार्गहरूको संगठन (रूटिङ)।
• तानेर खसाल्नु।
• नयाँ वस्तुहरू (बोर्डहरू, सूचीहरू, कार्डहरू) कसरी सिर्जना गर्ने।
• इनपुट डाटा प्रशोधन र जाँच गर्दै।
• ग्राहक पक्षबाट: स्थानीय भण्डारण कसरी प्रयोग गर्ने, कसरी स्थानीय भण्डारणमा डाटा बचत गर्ने, स्थानीय भण्डारणबाट डाटा कसरी पढ्ने।
• सर्भर साइडबाट: डाटाबेस कसरी प्रयोग गर्ने, डाटाबेसमा डाटा कसरी बचत गर्ने, डाटाबेसबाट डाटा कसरी पढ्ने।

यहाँ एउटा भण्डारको उदाहरण हो, React+Redux मा बनाइएको।

व्यवस्थापक प्यानल

Github भण्डार।

एक साधारण CRUD अनुप्रयोग, आधारभूत कुराहरू सिक्नको लागि आदर्श। आउनुहोस् जानौं:

• प्रयोगकर्ताहरू सिर्जना गर्नुहोस्, प्रयोगकर्ताहरू व्यवस्थापन गर्नुहोस्।
• डाटाबेससँग अन्तर्क्रिया गर्नुहोस् - प्रयोगकर्ताहरू सिर्जना गर्नुहोस्, पढ्नुहोस्, सम्पादन गर्नुहोस्, मेटाउनुहोस्।
• इनपुट प्रमाणित गर्दै र फारमहरूसँग काम गर्दै।

क्रिप्टोकरन्सी ट्रयाकर (नेटिभ मोबाइल एप)

Github भण्डार।

जे पनि: स्विफ्ट, उद्देश्य-सी, प्रतिक्रिया नेटिभ, जाभा, कोटलिन।

अध्ययन गरौं:

• नेटिभ एप्लिकेसनहरूले कसरी काम गर्छ।
• API बाट डाटा कसरी पुन: प्राप्त गर्ने।
• नेटिभ पृष्ठ लेआउटले कसरी काम गर्छ।
• मोबाइल सिमुलेटरहरूसँग कसरी काम गर्ने।

यो API प्रयास गर्नुहोस्। यदि तपाईंले केहि राम्रो पाउनुभयो भने, टिप्पणीहरूमा लेख्नुहोस्।

यदि तपाइँ इच्छुक हुनुहुन्छ भने, यो यहाँ छ यहाँ एउटा ट्यूटोरियल छ.

स्क्र्याचबाट तपाईंको आफ्नै वेबप्याक कन्फिगरेसन सेट अप गर्नुहोस्

प्राविधिक रूपमा, यो एउटा अनुप्रयोग होइन, तर वेबप्याक भित्रबाट कसरी काम गर्छ भनेर बुझ्न यो धेरै उपयोगी कार्य हो। अब यो "ब्ल्याक बक्स" होइन, तर बुझ्न सकिने उपकरण हुनेछ।

आवश्यकताहरू:

• es7 देखि es5 (आधारभूत) कम्पाइल गर्नुहोस्।
• jsx लाई js मा कम्पाइल गर्नुहोस् - वा - .vue to .js (तपाईले लोडरहरू सिक्नु पर्छ)
• वेबप्याक डेभ सर्भर र हट मोड्युल रिलोडिङ सेट अप गर्नुहोस्। (vue-cli र create-react-app दुवै प्रयोग गर्नुहोस्)
• Heroku, now.sh वा Github प्रयोग गर्नुहोस्, वेबप्याक परियोजनाहरू कसरी डिप्लोय गर्ने सिक्नुहोस्।
• css - scss, कम, स्टाइलस कम्पाइल गर्न आफ्नो मनपर्ने प्रिप्रोसेसर सेट अप गर्नुहोस्।
• वेबप्याकको साथ छविहरू र svgs कसरी प्रयोग गर्ने सिक्नुहोस्।

यो पूर्ण शुरुआतीहरूको लागि एक अद्भुत स्रोत हो।

Hackernews क्लोन

प्रत्येक Jedi लाई आफ्नै Hackernews बनाउन आवश्यक छ।

तपाईंले बाटोमा के सिक्नुहुनेछ:

• Hackernews API सँग कसरी अन्तरक्रिया गर्ने।
• एकल पृष्ठ अनुप्रयोग कसरी सिर्जना गर्ने।
• टिप्पणीहरू, व्यक्तिगत टिप्पणीहरू, प्रोफाइलहरू हेर्ने जस्ता सुविधाहरू कसरी लागू गर्ने।
• अनुरोध प्रशोधन मार्गहरूको संगठन (रूटिङ)।

टुडुसेचका

TodoMVC।

गम्भीरतापूर्वक? Tudushka? ती हजारौं छन्। तर मलाई विश्वास गर्नुहोस्, यो लोकप्रियताको कारण छ।
तपाईंले आधारभूत कुराहरू बुझ्नुभएको छ भनी सुनिश्चित गर्न Tudu एप एउटा उत्कृष्ट तरिका हो। एउटा अनुप्रयोग भेनिला जाभास्क्रिप्टमा र एउटा आफ्नो मनपर्ने फ्रेमवर्कमा लेख्ने प्रयास गर्नुहोस्।

सिक्नुहोस्:

• नयाँ कार्यहरू सिर्जना गर्नुहोस्।
• जाँच गर्नुहोस् कि फिल्डहरू भरिएका छन्।
• फिल्टर कार्यहरू (सम्पन्न, सक्रिय, सबै)। प्रयोग गर्नुहोस् filter и reduce.
• Javascript को आधारभूत कुराहरू बुझ्नुहोस्।

क्रमबद्ध ड्र्याग र ड्रप सूची

Github भण्डार।

बुझ्न धेरै उपयोगी ड्र्याग एण्ड ड्रप एपीआई.

आउनुहोस् जानौं:

• API ड्र्याग र ड्रप गर्नुहोस्
• रिच UI हरू सिर्जना गर्नुहोस्

मेसेन्जर क्लोन (नेटिभ एप)

तपाईले बुझ्नुहुनेछ कि कसरी वेब एप्लिकेसन र नेटिभ एप्लिकेसनले काम गर्छ, जसले तपाईलाई ग्रे मासबाट अलग गर्नेछ।

हामी के अध्ययन गर्नेछौं:

• वेब सकेटहरू (तत्काल सन्देशहरू)
• नेटिभ एप्लिकेसनहरूले कसरी काम गर्छ।
• टेम्प्लेटहरू नेटिभ एपहरूमा कसरी काम गर्छन्।
• नेटिभ अनुप्रयोगहरूमा अनुरोध प्रशोधन मार्गहरू व्यवस्थित गर्दै।

पाठ सम्पादक

टेक्स्ट एडिटरको उद्देश्य भनेको प्रयोगकर्ताहरूको ढाँचालाई मान्य HTML मार्कअपमा रूपान्तरण गर्ने प्रयासलाई कम गर्नु हो। राम्रो पाठ सम्पादकले प्रयोगकर्ताहरूलाई विभिन्न तरिकामा पाठ ढाँचा गर्न अनुमति दिन्छ।

केहि बिन्दुमा, सबैले पाठ सम्पादक प्रयोग गरेका छन्। त्यसैले किन नहोस् यसलाई आफै सिर्जना गर्नुहोस्?

Reddit क्लोन

Reddit एक सामाजिक समाचार एकत्रीकरण, वेब सामग्री मूल्याङ्कन र छलफल साइट हो।

Reddit ले मेरो धेरैजसो समय लिन्छ, तर म यसमा ह्याङ्ग आउट गर्न जारी राख्छु। Reddit क्लोन सिर्जना गर्नु प्रोग्रामिङ सिक्ने एक प्रभावकारी तरिका हो (एकै समयमा Reddit ब्राउज गर्दा)।

Reddit ले तपाईंलाई धेरै धनी प्रदान गर्दछ एपीआई। कुनै पनि सुविधाहरू नछोड्नुहोस् वा कामहरू जथाभावी नगर्नुहोस्। ग्राहकहरु र ग्राहकहरु संग वास्तविक संसारमा, तपाईले अव्यवस्थित रूपमा काम गर्न सक्नुहुन्न, वा तपाईले चाँडै आफ्नो काम गुमाउनुहुनेछ।

स्मार्ट ग्राहकहरूले तुरुन्तै महसुस गर्नेछन् कि काम खराब भइरहेको छ र अरू कसैलाई भेट्टाउनेछ।

Reddit API

खुला स्रोत NPM प्याकेज प्रकाशित गर्दै

यदि तपाइँ जाभास्क्रिप्ट कोड लेख्नुहुन्छ भने, संभावना तपाइँ प्याकेज प्रबन्धक प्रयोग गर्नुहुन्छ। प्याकेज प्रबन्धकले तपाईंलाई अवस्थित कोड पुन: प्रयोग गर्न अनुमति दिन्छ जुन अन्य व्यक्तिहरूले लेखेका र प्रकाशित गरेका छन्।

प्याकेजको पूर्ण विकास चक्र बुझ्नुले धेरै राम्रो अनुभव प्रदान गर्नेछ। कोड प्रकाशित गर्दा तपाईंले जान्न आवश्यक धेरै कुराहरू छन्। तपाईंले सुरक्षा, सिमेन्टिक संस्करण, स्केलेबिलिटी, नामकरण सम्मेलनहरू र मर्मतसम्भार बारे सोच्न आवश्यक छ।

प्याकेज जे पनि हुन सक्छ। यदि तपाइँसँग कुनै विचार छैन भने, तपाइँको आफ्नै Lodash सिर्जना गर्नुहोस् र यसलाई प्रकाशित गर्नुहोस्।

लोडास: lodash.com

तपाईंले अनलाइन गरेको कुनै कुराले तपाईंलाई अरूभन्दा 10% माथि राख्छ। यहाँ केही उपयोगी स्रोतहरू छन् खुला स्रोत र प्याकेजहरूको बारेमा।

फ्रीकोडक्याम्प पाठ्यक्रम

FCC पाठ्यक्रम

freeCodecamp ले धेरै संकलन गरेको छ व्यापक प्रोग्रामिंग पाठ्यक्रम.

freeCodeCamp एक गैर-लाभकारी संस्था हो। यसमा एक अन्तरक्रियात्मक वेब-आधारित सिकाइ प्लेटफर्म, एक अनलाइन सामुदायिक फोरम, च्याट कोठा, मध्यम प्रकाशनहरू, र स्थानीय संस्थाहरू समावेश छन् जसले वेब विकासलाई सबैको लागि पहुँचयोग्य बनाउन चाहन्छ।

यदि तपाईंले सम्पूर्ण पाठ्यक्रम पूरा गर्न प्रबन्ध गर्नुभयो भने तपाईं आफ्नो पहिलो कामको लागि योग्य हुनुहुनेछ।

स्क्र्याचबाट HTTP सर्भर सिर्जना गर्नुहोस्

HTTP प्रोटोकल मुख्य प्रोटोकल मध्ये एक हो जसको माध्यमबाट सामग्री इन्टरनेटमा यात्रा गर्दछ। HTTP सर्भरहरू HTML, CSS, र JS जस्ता स्थिर सामग्रीहरू सेवा गर्न प्रयोग गरिन्छ।

स्क्र्याचबाट HTTP प्रोटोकल लागू गर्न सक्षम हुनुले चीजहरू कसरी अन्तरक्रिया गर्छ भन्ने बारे तपाईंको ज्ञान विस्तार गर्नेछ।

उदाहरणका लागि, यदि तपाइँ NodeJs प्रयोग गर्नुहुन्छ भने, तपाइँलाई थाहा छ कि एक्सप्रेसले HTTP सर्भर प्रदान गर्दछ।

सन्दर्भको लागि, हेर्नुहोस् यदि तपाईं सक्नुहुन्छ:

• कुनै पनि पुस्तकालयहरू प्रयोग नगरी सर्भर सेटअप गर्नुहोस्
• सर्भरले HTML, CSS र JS सामग्रीहरू सेवा गर्नुपर्छ।
• स्क्र्याचबाट राउटर लागू गर्दै
• परिवर्तनहरू निगरानी गर्नुहोस् र सर्भर अपडेट गर्नुहोस्

यदि तपाईलाई थाहा छैन किन, प्रयोग गर्नुहोस् जानुहोस् र HTTP सर्भर सिर्जना गर्ने प्रयास गर्नुहोस् चायदान स्क्र्याच देखि।

नोटहरूको लागि डेस्कटप एप

हामी सबै नोट लिन्छौं, हैन?

नोट एप सिर्जना गरौं। अनुप्रयोगले नोटहरू बचत गर्न र डाटाबेससँग सिङ्क्रोनाइज गर्न आवश्यक छ। Electron, Swift, वा तपाईलाई मनपर्ने र तपाईको प्रणालीको लागि के काम गर्दछ प्रयोग गरेर एउटा नेटिभ एप बनाउनुहोस्।

यसलाई पहिलो चुनौती (पाठ सम्पादक) सँग संयोजन गर्न स्वतन्त्र महसुस गर्नुहोस्।

बोनसको रूपमा, वेब संस्करणसँग आफ्नो डेस्कटप संस्करण सिंक गर्ने प्रयास गर्नुहोस्।

पोडकास्ट (ओभरकास्ट क्लोन)

पोडकास्ट कसले सुन्दैन?

निम्न कार्यक्षमता संग वेब अनुप्रयोग सिर्जना गर्नुहोस्:

• खाता खोल्नुहोस्
• पोडकास्टहरू खोज्नुहोस्
• मूल्याङ्कन गर्नुहोस् र पोडकास्टहरूको सदस्यता लिनुहोस्
• रोक्नुहोस् र खेल्नुहोस्, गति परिवर्तन गर्नुहोस्, 30 सेकेन्डको लागि अगाडि र पछाडि कार्यहरू।

सुरूवात बिन्दुको रूपमा iTunes API प्रयोग गर्ने प्रयास गर्नुहोस्। यदि तपाईलाई कुनै अन्य स्रोतहरू थाहा छ भने, कृपया टिप्पणीहरूमा पोस्ट गर्नुहोस्।

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

स्क्रिन क्याप्चर

नमस्ते! म अहिले मेरो स्क्रिन फिल्म गर्दै छु!

एउटा डेस्कटप वा वेब एप बनाउनुहोस् जसले तपाईंलाई आफ्नो स्क्रिन खिच्न र क्लिपलाई यस रूपमा बचत गर्न अनुमति दिन्छ .gif

यहाँ केहि सुझावहरुयो कसरी हासिल गर्न।

स्रोतहरू

• विकासकर्ताका लागि 5 थप साहसी प्रशिक्षण परियोजनाहरू (लेयर, स्कुश, क्याल्कुलेटर, वेबसाइट क्रलर, संगीत प्लेयर)
• 9 परियोजनाहरू तपाईंको फ्रन्ट-एन्ड सीपहरू सुधार गर्न
• फ्रन्ट-एन्ड विकासकर्ताका लागि छवटा कार्यहरू
• विकासकर्ताको लागि रमाइलो अभ्यास
• 8 शैक्षिक परियोजनाहरू
• अभ्यास गर्न परियोजनाहरूको अर्को सूची

स्रोत: www.habr.com