ఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)

1. భావన క్లోన్

నోషన్ అప్లికేషన్ మీ వర్క్‌ఫ్లోను ఆప్టిమైజ్ చేయడానికి, పత్రాలతో పని చేయడానికి, టాస్క్‌లను షెడ్యూల్ చేయడానికి మరియు పరికరాల మధ్య డేటాను సమకాలీకరించడానికి మిమ్మల్ని అనుమతిస్తుంది.

www.notion.so

నోషన్ క్లోన్‌ని సృష్టించడం ద్వారా మీరు ఏమి నేర్చుకుంటారు:

• HTML డ్రాగ్ మరియు డ్రాప్ API. వినియోగదారు "మౌస్‌తో పట్టుకోవచ్చు" లాగగలిగే మూలకం మరియు దానిని ఉంచండి పడిపోవు జోన్.
• మీ కంప్యూటర్ మరియు స్మార్ట్‌ఫోన్ మధ్య నిజ సమయంలో డేటాను ఎలా సమకాలీకరించాలి.
• మేము రికార్డులను సృష్టించడానికి, చదవడానికి, నవీకరించడానికి మరియు తొలగించడానికి వినియోగదారులను అనుమతిస్తాము, తద్వారా CRUD నైపుణ్యాలకు శిక్షణ ఇస్తాము.

వ్యాసం EDISON సాఫ్ట్‌వేర్ మద్దతుతో అనువదించబడింది, ఇది అప్లికేషన్లు మరియు వెబ్‌సైట్‌లను అభివృద్ధి చేస్తుందిమరియు స్టార్టప్‌లలో పెట్టుబడులు పెడుతుంది.

2. Repl.it క్లోన్

Repl.it అనేది నిజ-సమయ సహకార కోడ్ సవరణ కోసం ఒక సాధనం. మీరు అనేక భాషలను ఎంచుకోవచ్చు: జావాస్క్రిప్ట్, పైథాన్, గో మరియు బ్రౌజర్‌లో నేరుగా కోడ్‌ని అమలు చేయండి. శీఘ్ర డెమోలు మరియు కోడ్ ఇంటర్వ్యూలకు చాలా ఉపయోగకరంగా ఉంటుంది.

repl.it

Repl.it క్లోన్‌ని సృష్టించడం ద్వారా మీరు ఏమి నేర్చుకుంటారు:

• బ్రౌజర్‌లో (క్లయింట్ వైపు) కోడ్ (సర్వర్ వైపు) ఎలా అమలు చేయాలి మరియు అమలు చేయాలి.
• ఇన్‌పుట్ డేటా (సోర్స్ కోడ్) చదవండి మరియు అమలు ఫలితాన్ని ప్రదర్శించండి.
• వెబ్‌లో ఫైల్‌లు మరియు ఫోల్డర్‌లను ఎలా సృష్టించాలి మరియు ఫలితాలను ఎలా సేవ్ చేయాలి.
• కోడ్ సింటాక్స్‌ను ఎలా హైలైట్ చేయాలి.

3. Google ఫోటోల క్లోన్

Google ఫోటోలు అనేది ఫోటోలను నిల్వ చేయడానికి మరియు భాగస్వామ్యం చేయడానికి ఒక సేవ.
ఏదైనా ఆధునిక ఫోటో అప్లికేషన్ ప్రాథమిక విధులను నిర్వహించగలదు: అప్‌లోడ్ చేయడం, కత్తిరించడం మొదలైనవి. వ్యక్తులు వారి స్వంత అవతార్‌లను సృష్టించాలని మరియు పిల్లుల ఫోటోలను భాగస్వామ్యం చేయాలని కోరుకుంటారు, కాబట్టి మీరు చిత్రాలతో పని చేయగలగాలి.

www.google.com/photos/about

Google ఫోటోల క్లోన్‌ని సృష్టించడం ద్వారా మీరు ఏమి నేర్చుకుంటారు:

• ఫోన్‌లు, టాబ్లెట్‌లు, ల్యాప్‌టాప్‌లు మరియు పెద్ద టీవీ స్క్రీన్‌లలో కూడా ప్రతిస్పందించే చిత్రాలను ఎలా సృష్టించాలి.
• ఇమేజ్ అప్‌లోడ్‌లను ఎలా నిర్వహించాలి, ముఖ్యంగా పెద్ద చిత్రాలు (>1MB) మరియు బల్క్ అప్‌లోడ్‌లు.
• ఇమేజ్ ఫైల్‌లను ప్రాసెస్ చేయండి, థంబ్‌నెయిల్‌ల కోసం లేదా గ్యాలరీని తెరిచేటప్పుడు ఫోటోలను కత్తిరించండి మరియు పరిమాణాన్ని మార్చండి.
• ఉపరి లాభ బహుమానము: క్లౌడ్ లేదా స్థానిక డేటాబేస్‌లో చిత్రాలను ఎలా నిల్వ చేయాలి.

4. Gifsky క్లోన్

గిఫ్స్కి ఫంక్షన్‌లను ఉపయోగించి వీడియోను GIFకి మారుస్తుందిpngquant సమర్థవంతమైన క్రాస్-ఫ్రేమ్ ప్యాలెట్‌లు మరియు టెంపోరల్ యాంటీ అలియాసింగ్ కోసం. ఫలితంగా ఒక్కో ఫ్రేమ్‌కి వేలకొద్దీ పూలు ఉండే GIF.

gif.ski

Gifski క్లోన్‌ని సృష్టించడం ద్వారా మీరు ఏమి నేర్చుకుంటారు:

• వీడియో ఫైల్‌లను ఎలా మార్చాలి (.mp4 నుండి .gif).
• డ్రాగ్ అండ్ డ్రాప్ HTML APIని ఎలా ఉపయోగించాలి.
• ఇమేజ్ ఆప్టిమైజేషన్ మరియు ప్రాసెసింగ్ ఎలా పని చేస్తాయి.

గమనిక: Gifsky ఒక ఓపెన్ సోర్స్ ప్రాజెక్ట్ మరియు GitHubలో ఉంది!

5. క్రిప్టోకరెన్సీ రేట్లను పర్యవేక్షించడం

రియాక్ట్ స్థానిక క్రిప్టోకరెన్సీ ట్రాకర్

కరెన్సీ రేటు ట్రాకర్‌ని సృష్టించడం ద్వారా మీరు ఏమి నేర్చుకుంటారు:

• APIతో పని చేయడం మరియు API నుండి డేటాను రిమోట్‌గా స్వీకరించడం ఎలా.
• డేటాను జాబితాగా ఎలా ప్రదర్శించాలి.
• ఉపరి లాభ బహుమానము: మీకు ఆసక్తి ఉంటే, నేను ఇటీవల వ్రాసాను ధర ట్రాకర్‌ను సృష్టించడంపై ట్యుటోరియల్ రియాక్ట్ నేటివ్‌తో క్రిప్టోకరెన్సీ కోసం.

గమనిక: ఇక్కడ GitHub ఉదాహరణ రిపోజిటరీ.

మునుపటి ప్రచురణల నుండి ప్రాజెక్ట్‌ల ఎంపిక.

లేయర్

www.reddit.com/r/layer

లేయర్ అనేది భాగస్వామ్య “బోర్డ్”లో ప్రతి ఒక్కరూ పిక్సెల్‌ని గీయగల సంఘం. అసలు ఆలోచన రెడ్డిట్‌లో పుట్టింది. r/Layer కమ్యూనిటీ అనేది భాగస్వామ్య సృజనాత్మకతకు ఒక రూపకం, ప్రతి ఒక్కరూ సృష్టికర్తలు కావచ్చు మరియు ఒక సాధారణ కారణానికి సహకరించగలరు.

మీ స్వంత లేయర్ ప్రాజెక్ట్‌ను సృష్టించేటప్పుడు మీరు ఏమి నేర్చుకుంటారు:

• JavaScript కాన్వాస్ ఎలా పని చేస్తుంది కాన్వాస్‌ను ఎలా ఆపరేట్ చేయాలో తెలుసుకోవడం అనేది చాలా అప్లికేషన్‌లలో కీలకమైన నైపుణ్యం.
• వినియోగదారు అనుమతులను ఎలా సమన్వయం చేయాలి. ప్రతి వినియోగదారు లాగిన్ చేయకుండానే ప్రతి 15 నిమిషాలకు ఒక పిక్సెల్ డ్రా చేయవచ్చు.
• కుక్కీ సెషన్‌లను సృష్టించండి.

Squoosh

squoosh.app

Squoosh అనేది అనేక అధునాతన ఎంపికలతో కూడిన ఇమేజ్ కంప్రెషన్ అప్లికేషన్.

GIF 20 MB

Squoosh యొక్క మీ స్వంత సంస్కరణను సృష్టించడం ద్వారా మీరు నేర్చుకుంటారు:

• చిత్ర పరిమాణాలతో ఎలా పని చేయాలి
• Drag'n'Drop API యొక్క ప్రాథమికాలను తెలుసుకోండి
• API మరియు ఈవెంట్ శ్రోతలు ఎలా పని చేస్తారో అర్థం చేసుకోండి
• ఫైల్‌లను ఎలా అప్‌లోడ్ చేయాలి మరియు ఎగుమతి చేయాలి

గమనిక: ఇమేజ్ కంప్రెసర్ స్థానికంగా ఉంటుంది. సర్వర్‌కు అదనపు డేటాను పంపాల్సిన అవసరం లేదు. మీరు ఇంట్లో కంప్రెసర్‌ని కలిగి ఉండవచ్చు లేదా మీరు దానిని సర్వర్‌లో ఉపయోగించవచ్చు, మీ ఎంపిక.

కాలిక్యులేటర్

వస్తావా? తీవ్రంగా? కాలిక్యులేటర్? అవును, సరిగ్గా, ఒక కాలిక్యులేటర్. గణిత కార్యకలాపాల యొక్క ప్రాథమికాలను అర్థం చేసుకోవడం మరియు అవి ఎలా కలిసి పని చేస్తాయి అనేది మీ అప్లికేషన్‌లను సరళీకృతం చేయడంలో కీలకమైన నైపుణ్యం. ముందుగానే లేదా తరువాత మీరు సంఖ్యలను ఎదుర్కోవలసి ఉంటుంది మరియు ఎంత త్వరగా అంత మంచిది.

jarodburchill.github.io/CalculatorReactApp

మీ స్వంత కాలిక్యులేటర్‌ను సృష్టించడం ద్వారా మీరు నేర్చుకుంటారు:

• సంఖ్యలు మరియు గణిత కార్యకలాపాలతో పని చేయండి
• ఈవెంట్ శ్రోతల APIతో ప్రాక్టీస్ చేయండి
• అంశాలను ఎలా ఏర్పాటు చేయాలి, శైలులను అర్థం చేసుకోండి

క్రాలర్ (సెర్చ్ ఇంజన్)

ప్రతి ఒక్కరూ శోధన ఇంజిన్‌ను ఉపయోగించారు, కాబట్టి మీ స్వంతంగా ఎందుకు సృష్టించకూడదు? సమాచారం కోసం శోధించడానికి క్రాలర్లు అవసరం. ప్రతి ఒక్కరూ వాటిని ప్రతిరోజూ ఉపయోగిస్తున్నారు మరియు ఈ సాంకేతికత మరియు నిపుణుల కోసం డిమాండ్ కాలక్రమేణా పెరుగుతుంది.

Google శోధన ఇంజిన్

మీ స్వంత శోధన ఇంజిన్‌ని సృష్టించడం ద్వారా మీరు ఏమి నేర్చుకుంటారు:

• క్రాలర్లు ఎలా పని చేస్తాయి
• సైట్‌లను ఎలా సూచిక చేయాలి మరియు రేటింగ్ మరియు కీర్తి ద్వారా వాటిని ఎలా ర్యాంక్ చేయాలి
• ఇండెక్స్ చేయబడిన సైట్‌లను డేటాబేస్‌లో ఎలా నిల్వ చేయాలి మరియు డేటాబేస్‌తో ఎలా పని చేయాలి

మ్యూజిక్ ప్లేయర్ (Spotify, Apple Music)

ప్రతి ఒక్కరూ సంగీతాన్ని వింటారు - ఇది మన జీవితంలో ఒక అంతర్భాగం. ఆధునిక మ్యూజిక్ స్ట్రీమింగ్ ప్లాట్‌ఫారమ్ యొక్క ప్రాథమిక మెకానిక్స్ ఎలా పనిచేస్తుందో బాగా అర్థం చేసుకోవడానికి మ్యూజిక్ ప్లేయర్‌ని క్రియేట్ చేద్దాం.

Spotify

మీ స్వంత సంగీత స్ట్రీమింగ్ ప్లాట్‌ఫారమ్‌ను సృష్టించడం ద్వారా మీరు ఏమి నేర్చుకుంటారు:

• APIతో ఎలా పని చేయాలి. Spotify లేదా Apple Music నుండి APIని ఉపయోగించండి
• తదుపరి/మునుపటి ట్రాక్‌కి ప్లే చేయడం, పాజ్ చేయడం లేదా రివైండ్ చేయడం ఎలా
• వాల్యూమ్‌ను ఎలా మార్చాలి
• వినియోగదారు రూటింగ్ మరియు బ్రౌజర్ చరిత్రను ఎలా నిర్వహించాలి

రియాక్ట్ (హుక్స్‌తో) ఉపయోగించి మూవీ సెర్చ్ యాప్

రియాక్ట్‌ని ఉపయోగించి మూవీ సెర్చ్ యాప్‌ని క్రియేట్ చేయడం మీరు మొదటగా ప్రారంభించవచ్చు. చివరి అప్లికేషన్ ఎలా ఉంటుందో దాని యొక్క చిత్రం క్రింద ఉంది:

మీరు ఏమి నేర్చుకుంటారు
ఈ యాప్‌ను రూపొందించడం ద్వారా, మీరు సాపేక్షంగా కొత్త Hooks APIని ఉపయోగించడం ద్వారా మీ రియాక్ట్ నైపుణ్యాలను మెరుగుపరుస్తారు. ఉదాహరణ ప్రాజెక్ట్ రియాక్ట్ భాగాలు, చాలా హుక్స్, బాహ్య API మరియు కొన్ని CSS స్టైలింగ్‌ని ఉపయోగిస్తుంది.

టెక్ స్టాక్ మరియు ఫీచర్లు

• హుక్స్‌తో ప్రతిస్పందించండి
• క్రియేట్-రియాక్ట్-అనువర్తనం
• JSX
• CSS

ఎటువంటి తరగతులను ఉపయోగించకుండా, ఈ ప్రాజెక్ట్‌లు మీకు ఫంక్షనల్ రియాక్ట్‌లోకి సరైన ఎంట్రీ పాయింట్‌ను అందిస్తాయి మరియు 2020లో మీకు ఖచ్చితంగా సహాయపడతాయి. మీరు కనుగొనగలరు ఇక్కడ ఉదాహరణ ప్రాజెక్ట్. సూచనలను అనుసరించండి లేదా మీ స్వంతం చేసుకోండి.

Vueతో చాట్ యాప్

నాకు ఇష్టమైన జావాస్క్రిప్ట్ లైబ్రరీని ఉపయోగించి చాట్ యాప్‌ను సృష్టించడం మీరు చేయవలసిన మరో గొప్ప ప్రాజెక్ట్: VueJS. అప్లికేషన్ ఇలా కనిపిస్తుంది:

మీరు ఏమి నేర్చుకుంటారు
ఈ ట్యుటోరియల్‌లో, మీరు మొదటి నుండి Vue యాప్‌ను ఎలా తయారు చేయాలో నేర్చుకుంటారు - భాగాలను సృష్టించడం, స్థితిని నిర్వహించడం, మార్గాలను సృష్టించడం, మూడవ పక్ష సేవలకు కనెక్ట్ చేయడం మరియు ప్రామాణీకరణను కూడా నిర్వహించడం.

టెక్ స్టాక్ మరియు ఫీచర్లు

• వ్యూ
• vuex
• Vue రూటర్
• Vue CLI
• Pusher
• CSS

Vueతో ప్రారంభించడానికి లేదా 2020లో అభివృద్ధిలోకి రావడానికి మీ ప్రస్తుత నైపుణ్యాలను మెరుగుపరచుకోవడానికి ఇది నిజంగా గొప్ప ప్రాజెక్ట్. మీరు కనుగొనగలరు ఇక్కడ ట్యుటోరియల్.

కోణీయ 8తో అందమైన వాతావరణ యాప్

కోణీయ 8ని ఉపయోగించి అందమైన వాతావరణ యాప్‌ను రూపొందించడంలో ఈ ఉదాహరణ మీకు సహాయం చేస్తుంది:

మీరు ఏమి నేర్చుకుంటారు
ఈ ప్రాజెక్ట్ మొదటి నుండి అప్లికేషన్‌లను రూపొందించడంలో మీకు విలువైన నైపుణ్యాలను నేర్పుతుంది - డిజైన్ నుండి డెవలప్‌మెంట్ వరకు, డిప్లాయ్‌మెంట్-సిద్ధంగా ఉన్న అప్లికేషన్ వరకు.

టెక్ స్టాక్ మరియు ఫీచర్లు

• కోణీయ 8
• Firebase
• సర్వర్ వైపు రెండరింగ్
• గ్రిడ్ మరియు ఫ్లెక్స్‌బాక్స్‌తో CSS
• మొబైల్ స్నేహపూర్వక మరియు అనుకూలత
• డార్క్ మోడ్
• అందమైన ఇంటర్ఫేస్

ఈ అన్నింటినీ చుట్టుముట్టే ప్రాజెక్ట్‌లో నేను నిజంగా ఇష్టపడేది ఏమిటంటే, మీరు ఏకాంతంగా విషయాలను అధ్యయనం చేయరు. బదులుగా, మీరు డిజైన్ నుండి తుది విస్తరణ వరకు మొత్తం అభివృద్ధి ప్రక్రియను నేర్చుకుంటారు.

Svelteని ఉపయోగించి చేయవలసిన పని

స్వేల్టే అనేది కాంపోనెంట్-బేస్డ్ అప్రోచ్‌లో కొత్త పిల్లవాడిలా ఉంటుంది - కనీసం రియాక్ట్, వ్యూ మరియు యాంగ్యులర్‌ని పోలి ఉంటుంది. మరియు ఇది 2020కి సంబంధించిన హాటెస్ట్ కొత్త ఉత్పత్తులలో ఒకటి.

చేయవలసిన యాప్‌లు హాటెస్ట్ టాపిక్ కానవసరం లేదు, కానీ ఇది మీ స్వల్టే నైపుణ్యాలను మెరుగుపరుచుకోవడంలో మీకు నిజంగా సహాయపడుతుంది. ఇది ఇలా కనిపిస్తుంది:

మీరు ఏమి నేర్చుకుంటారు
ఈ ట్యుటోరియల్ ప్రారంభం నుండి ముగింపు వరకు Svelte 3ని ఉపయోగించి అప్లికేషన్‌ను ఎలా సృష్టించాలో మీకు చూపుతుంది. మీరు భాగాలు, స్టైలింగ్ మరియు ఈవెంట్ హ్యాండ్లర్‌లను ఉపయోగిస్తారు

టెక్ స్టాక్ మరియు ఫీచర్లు

• స్వల్టే 3
• భాగాలు
• CSSతో స్టైలింగ్
• ES 6 సింటాక్స్

చాలా మంచి Svelte స్టార్టర్ ప్రాజెక్ట్‌లు లేవు, కాబట్టి నేను కనుగొన్నాను ప్రారంభించడానికి ఇది మంచి ఎంపిక.

Next.jsని ఉపయోగించి ఇ-కామర్స్ యాప్

Next.js అనేది బాక్స్ వెలుపల సర్వర్ వైపు రెండరింగ్‌కు మద్దతు ఇచ్చే రియాక్ట్ అప్లికేషన్‌లను రూపొందించడానికి అత్యంత ప్రజాదరణ పొందిన ఫ్రేమ్‌వర్క్.

ఈ ప్రాజెక్ట్ ఇలా కనిపించే ఇ-కామర్స్ అప్లికేషన్‌ను ఎలా సృష్టించాలో మీకు చూపుతుంది:

మీరు ఏమి నేర్చుకుంటారు
ఈ ప్రాజెక్ట్‌లో, మీరు Next.jsతో ఎలా అభివృద్ధి చేయాలో నేర్చుకుంటారు—కొత్త పేజీలు మరియు భాగాలను సృష్టించడం, డేటాను సంగ్రహించడం మరియు శైలి మరియు తదుపరి అప్లికేషన్‌ని అమలు చేయడం.

టెక్ స్టాక్ మరియు ఫీచర్లు

• తదుపరి.జెస్
• భాగాలు మరియు పేజీలు
• డేటా నమూనా
• శైలీకరణ
• ప్రాజెక్ట్ విస్తరణ
• SSR మరియు SPA

క్రొత్తదాన్ని నేర్చుకోవడానికి ఇ-కామర్స్ యాప్ వంటి వాస్తవ ప్రపంచ ఉదాహరణను కలిగి ఉండటం ఎల్లప్పుడూ గొప్ప విషయం. నువ్వు చేయగలవు ఇక్కడ ట్యుటోరియల్‌ని కనుగొనండి.

Nuxt.jsతో పూర్తి స్థాయి బహుభాషా బ్లాగ్

Nuxt.js Vue కోసం, రియాక్ట్ కోసం Next.js అంటే ఏమిటి: సర్వర్-సైడ్ రెండరింగ్ మరియు సింగిల్-పేజీ అప్లికేషన్‌ల శక్తిని కలపడానికి గొప్ప ఫ్రేమ్‌వర్క్
మీరు సృష్టించగల చివరి అప్లికేషన్ ఇలా కనిపిస్తుంది:

మీరు ఏమి నేర్చుకుంటారు

ఈ నమూనా ప్రాజెక్ట్‌లో, ప్రారంభ సెటప్ నుండి తుది విస్తరణ వరకు Nuxt.jsని ఉపయోగించి పూర్తి వెబ్‌సైట్‌ను ఎలా సృష్టించాలో మీరు నేర్చుకుంటారు.

ఇది Nuxt అందించే పేజీలు మరియు భాగాలు మరియు SCSSతో స్టైలింగ్ వంటి అనేక అద్భుతమైన ఫీచర్‌ల ప్రయోజనాన్ని పొందుతుంది.

టెక్ స్టాక్ మరియు ఫీచర్లు

• Nuxt.js
• భాగాలు మరియు పేజీలు
• స్టోరీబ్లాక్ మాడ్యూల్
• హాగ్ ఫిష్
• రాష్ట్ర నిర్వహణ కోసం Vuex
• స్టైలింగ్ కోసం SCSS
• నక్స్ట్ మిడిల్‌వేర్

ఇది నిజంగా అద్భుతమైన ప్రాజెక్ట్, ఇది అనేక గొప్ప Nuxt.js లక్షణాలను కలిగి ఉంది. నేను వ్యక్తిగతంగా నక్స్ట్‌తో కలిసి పనిచేయడాన్ని ఇష్టపడతాను కాబట్టి మీరు దీన్ని ఒకసారి ప్రయత్నించండి, ఇది మిమ్మల్ని గొప్ప Vue డెవలపర్‌గా కూడా చేస్తుంది.

Gatsbyతో బ్లాగ్ చేయండి

Gatsby అనేది React మరియు GraphQLని ఉపయోగించే ఒక అద్భుతమైన స్టాటిక్ సైట్ జనరేటర్. ఇది ప్రాజెక్ట్ యొక్క ఫలితం:

మీరు ఏమి నేర్చుకుంటారు

ఈ ట్యుటోరియల్‌లో, మీరు React మరియు GraphQLని ఉపయోగించి మీ స్వంత కథనాలను వ్రాయడానికి ఉపయోగించే బ్లాగును సృష్టించడానికి Gatsbyని ఎలా ఉపయోగించాలో నేర్చుకుంటారు.

టెక్ స్టాక్ మరియు ఫీచర్లు

• గాత్స్బీ లను సంప్రదించింది
• స్పందించలేదు
• గ్రాఫ్క్యూల్
• ప్లగిన్‌లు మరియు థీమ్‌లు
• MDX/మార్క్‌డౌన్
• బూట్స్ట్రాప్ CSS
• పద్ధతులు

మీరు ఎప్పుడైనా బ్లాగును ప్రారంభించాలనుకుంటే, ఇది ఒక గొప్ప ఉదాహరణ రియాక్ట్ మరియు గ్రాఫ్‌క్యూఎల్‌ని ఉపయోగించి దీన్ని ఎలా తయారు చేయాలో.

నేను WordPress ఒక చెడ్డ ఎంపిక అని చెప్పడం లేదు, కానీ Gatsbyతో మీరు Reactని ఉపయోగించి అధిక-పనితీరు గల వెబ్‌సైట్‌లను రూపొందించవచ్చు - ఇది అద్భుతమైన కలయిక.

గ్రిడ్‌సమ్‌తో బ్లాగ్ చేయండి

Vue కోసం గ్రిడ్‌సమ్... సరే, మేము ఇప్పటికే దీన్ని Next/Nuxtతో కలిగి ఉన్నాము.
కానీ గ్రిడ్‌సమ్ మరియు గాట్స్‌బైకి కూడా ఇదే వర్తిస్తుంది. రెండూ GraphQLని తమ డేటా లేయర్‌గా ఉపయోగిస్తాయి, అయితే Gridsome VueJSని ఉపయోగిస్తుంది. ఇది అద్భుతమైన స్టాటిక్ సైట్ జనరేటర్, ఇది గొప్ప బ్లాగులను సృష్టించడంలో మీకు సహాయపడుతుంది:

మీరు ఏమి నేర్చుకుంటారు

గ్రిడ్‌సమ్, గ్రాఫ్‌క్యూఎల్ మరియు మార్క్‌డౌన్‌తో ప్రారంభించడానికి సాధారణ బ్లాగును ఎలా సృష్టించాలో ఈ ప్రాజెక్ట్ మీకు నేర్పుతుంది. నెట్‌లిఫై ద్వారా అప్లికేషన్‌ను ఎలా అమలు చేయాలో కూడా ఇది కవర్ చేస్తుంది.

టెక్ స్టాక్ మరియు ఫీచర్లు

• గ్రిడ్సమ్
• వ్యూ
• గ్రాఫ్క్యూల్
• Markdown
• నెట్‌లిఫై

ఇది ఖచ్చితంగా అత్యంత సమగ్రమైన ట్యుటోరియల్ కాదు, కానీ ఇది గ్రిడ్‌సమ్ యొక్క ప్రాథమిక భావనలను కవర్ చేస్తుంది మరియు మార్క్‌డౌన్ మంచి ప్రారంభ స్థానం కావచ్చు.

Quasar ఉపయోగించి సౌండ్‌క్లౌడ్ లాంటి ఆడియో ప్లేయర్

Quasar అనేది మొబైల్ అప్లికేషన్‌లను రూపొందించడానికి ఉపయోగించే మరొక Vue ఫ్రేమ్‌వర్క్. ఈ ప్రాజెక్ట్‌లో మీరు ఆడియో ప్లేయర్ అప్లికేషన్‌ను సృష్టిస్తారు, ఉదాహరణకు:

మీరు ఏమి నేర్చుకుంటారు

ఇతర ప్రాజెక్ట్‌లు ప్రధానంగా వెబ్ అప్లికేషన్‌లపై దృష్టి సారిస్తుండగా, Vue మరియు Quasar ఫ్రేమ్‌వర్క్‌ని ఉపయోగించి మొబైల్ అప్లికేషన్‌ను ఎలా సృష్టించాలో ఇది మీకు చూపుతుంది.
మీరు ఇప్పటికే ఆండ్రాయిడ్ స్టూడియో/ఎక్స్‌కోడ్ కాన్ఫిగర్‌తో కార్డోవాను రన్ చేసి ఉండాలి. కాకపోతే, మాన్యువల్‌లో క్వాసర్ వెబ్‌సైట్‌కి లింక్ ఉంది, అక్కడ వారు అన్నింటినీ ఎలా సెటప్ చేయాలో చూపుతారు.

టెక్ స్టాక్ మరియు ఫీచర్లు

• క్వాజార్
• వ్యూ
• Cordova
• వేవ్ సర్ఫర్
• UI భాగాలు

చిన్న ప్రాజెక్ట్, మొబైల్ అప్లికేషన్‌లను రూపొందించడానికి క్వాసర్ సామర్థ్యాలను ప్రదర్శిస్తోంది.

క్రెడిట్ కార్డ్ ఫారమ్

మృదువైన మరియు ఆనందించే సూక్ష్మ పరస్పర చర్యలతో కూడిన చల్లని క్రెడిట్ కార్డ్ ఆకృతి. నంబర్ ఫార్మాటింగ్, ధృవీకరణ మరియు ఆటోమేటిక్ కార్డ్ రకాన్ని గుర్తించడం వంటివి ఉంటాయి. ఇది Vue.jsలో నిర్మించబడింది మరియు పూర్తిగా ప్రతిస్పందిస్తుంది. (మీరు చూడగలరు ఇక్కడ.)

క్రెడిట్ కార్డ్-ఫారమ్

మీరు ఏమి నేర్చుకుంటారు:

• ఫారమ్‌లను ప్రాసెస్ చేయండి మరియు ధృవీకరించండి
• ఈవెంట్‌లను నిర్వహించండి (ఉదాహరణకు, ఫీల్డ్‌లు మారినప్పుడు)
• పేజీలో ఎలిమెంట్లను ఎలా ప్రదర్శించాలో మరియు ఉంచాలో అర్థం చేసుకోండి, ముఖ్యంగా ఫారమ్ పైన కనిపించే క్రెడిట్ కార్డ్ సమాచారం

బార్ గ్రాఫ్

హిస్టోగ్రాం అనేది చార్ట్ లేదా గ్రాఫ్, ఇది వారు సూచించే విలువలకు అనులోమానుపాతంలో ఎత్తులు లేదా పొడవులతో దీర్ఘచతురస్రాకార బార్‌లతో వర్గీకరణ డేటాను సూచిస్తుంది.

వాటిని నిలువుగా లేదా క్షితిజ సమాంతరంగా వర్తించవచ్చు. నిలువు బార్ చార్ట్‌ను కొన్నిసార్లు లైన్ చార్ట్ అని పిలుస్తారు.

మీరు ఏమి నేర్చుకుంటారు:

• నిర్మాణాత్మకంగా మరియు అర్థమయ్యే రీతిలో డేటాను ప్రదర్శించండి
• అదనంగా: మూలకాన్ని ఎలా ఉపయోగించాలో తెలుసుకోండి canvas మరియు దానితో అంశాలను ఎలా గీయాలి

ఇది మీరు ప్రపంచ జనాభా డేటాను కనుగొనవచ్చు. అవి సంవత్సరం వారీగా క్రమబద్ధీకరించబడతాయి.

ట్విట్టర్ హార్ట్ యానిమేషన్

తిరిగి 2016లో, ట్విట్టర్ తన ట్వీట్ల కోసం ఈ అద్భుతమైన యానిమేషన్‌ను పరిచయం చేసింది. 2019 నాటికి, ఇది ఇప్పటికీ భాగంగా కనిపిస్తుంది, కాబట్టి మీరే ఎందుకు సృష్టించకూడదు?

మీరు ఏమి నేర్చుకుంటారు:

• CSS లక్షణంతో పని చేయండి keyframes
• HTML మూలకాలను మార్చండి మరియు యానిమేట్ చేయండి
• జావాస్క్రిప్ట్, HTML మరియు CSSలను కలపండి

శోధించదగిన GitHub రిపోజిటరీలు

ఇక్కడ ఫ్యాన్సీ ఏమీ లేదు-GitHub రిపోజిటరీలు కేవలం గ్లోరిఫైడ్ లిస్ట్ మాత్రమే.
రిపోజిటరీలను ప్రదర్శించడం మరియు వాటిని ఫిల్టర్ చేయడానికి వినియోగదారుని అనుమతించడం లక్ష్యం. వా డు అధికారిక GitHub API ప్రతి వినియోగదారు కోసం రిపోజిటరీలను పొందడానికి.

GitHub ప్రొఫైల్ పేజీ - github.com/indreklasn

మీరు ఏమి నేర్చుకుంటారు:

• API నుండి డేటాను స్వీకరించండి
• API నుండి డేటాను ప్రదర్శించు
• ప్రతి శోధన కోసం సంబంధిత డేటాను ఫిల్టర్ చేసి చూపండి
• ఐచ్ఛికం: మీరు సవాలు కోసం సిద్ధంగా ఉన్నట్లయితే, ఉపయోగించండి API v4, GraphQL ఉపయోగించి నిర్మించబడింది. మీరు GraphQL నేర్చుకోవాలనుకుంటే, నా మునుపటి కథనాలలో ఒకదానికి వెళ్లండి.

రెడ్డిట్ స్టైల్ చాట్‌లు

చాట్‌లు వాటి సరళత మరియు వాడుకలో సౌలభ్యం కారణంగా ఒక ప్రసిద్ధ కమ్యూనికేషన్ మార్గం. అయితే ఆధునిక చాట్ రూమ్‌లకు నిజంగా ఇంధనం ఏది? వెబ్‌సాకెట్‌లు!

మీరు ఏమి నేర్చుకుంటారు:

• WebSockets, నిజ-సమయ కమ్యూనికేషన్ మరియు డేటా అప్‌డేట్‌లను ఉపయోగించండి
• వినియోగదారు యాక్సెస్ స్థాయిలతో పని చేయండి (ఉదాహరణకు, చాట్ ఛానెల్ యజమాని పాత్ర ఉంటుంది admin, మరియు గదిలో ఇతరులు - user)
• ఫారమ్‌లను ప్రాసెస్ చేయండి మరియు ధృవీకరించండి - గుర్తుంచుకోండి, సందేశాన్ని పంపడానికి చాట్ విండో input
• విభిన్న చాట్‌లను సృష్టించండి మరియు చేరండి
• వ్యక్తిగత సందేశాలతో పని చేయండి. వినియోగదారులు ఇతర వినియోగదారులతో ప్రైవేట్‌గా చాట్ చేయవచ్చు. ముఖ్యంగా, మీరు ఇద్దరు వినియోగదారుల మధ్య WebSocket కనెక్షన్‌ని ఏర్పాటు చేస్తారు.

గీత శైలి నావిగేషన్

ఈ నావిగేషన్ ప్రత్యేకత ఏమిటంటే పాప్‌ఓవర్ కంటైనర్ కంటెంట్‌కు సరిపోయేలా రూపాంతరం చెందుతుంది. కొత్త పాప్‌ఓవర్‌ను తెరవడం మరియు మూసివేయడం యొక్క సాంప్రదాయిక ప్రవర్తనతో పోలిస్తే ఈ పరివర్తనకు చక్కదనం ఉంది.

మీరు ఏమి నేర్చుకుంటారు:

• పరివర్తనాలతో CSS యానిమేషన్‌లను కలపండి
• కంటెంట్‌ను మసకబారుస్తుంది మరియు ఫ్లోటెడ్ ఎలిమెంట్‌కు యాక్టివ్ క్లాస్‌ని వర్తింపజేయండి

ప్యాక్మ్యాన్

మీ స్వంత ప్యాక్‌మ్యాన్ వెర్షన్‌ను సృష్టించండి. గేమ్‌లు ఎలా అభివృద్ధి చెందుతాయి అనే ఆలోచనను పొందడానికి మరియు ప్రాథమికాలను అర్థం చేసుకోవడానికి ఇది గొప్ప మార్గం. JavaScript ఫ్రేమ్‌వర్క్, రియాక్ట్ లేదా Vueని ఉపయోగించండి.

నువ్వు నేర్చుకుంటావు:

• మూలకాలు ఎలా కదులుతాయి
• ఏ కీలను నొక్కాలో ఎలా నిర్ణయించాలి
• తాకిడి యొక్క క్షణాన్ని ఎలా నిర్ణయించాలి
• మీరు మరింత ముందుకు వెళ్లి దెయ్యాల కదలిక నియంత్రణలను జోడించవచ్చు

మీరు ఈ ప్రాజెక్ట్ యొక్క ఉదాహరణను కనుగొంటారు రిపోజిటరీలో గ్యాలరీలు

వాడుకరి నిర్వహణ

ప్రాజెక్ట్ రిపోజిటరీలో గ్యాలరీలు

యూజర్ అడ్మినిస్ట్రేషన్ కోసం CRUD రకం అప్లికేషన్‌ను సృష్టించడం వలన అభివృద్ధి యొక్క ప్రాథమికాలను మీకు బోధిస్తుంది. ఇది కొత్త డెవలపర్‌లకు ప్రత్యేకంగా ఉపయోగపడుతుంది.

నువ్వు నేర్చుకుంటావు:

• రూటింగ్ అంటే ఏమిటి
• డేటా ఎంట్రీ ఫారమ్‌లను ఎలా నిర్వహించాలి మరియు వినియోగదారు ఏమి నమోదు చేశారో తనిఖీ చేయండి
• డేటాబేస్తో ఎలా పని చేయాలి - చర్యలను సృష్టించండి, చదవండి, నవీకరించండి మరియు తొలగించండి

మీ ప్రదేశంలో వాతావరణాన్ని తనిఖీ చేస్తోంది

ప్రాజెక్ట్ రిపోజిటరీలో గ్యాలరీలు

మీరు యాప్‌లను సృష్టించాలనుకుంటే, వాతావరణ యాప్‌తో ప్రారంభించండి. ఈ ప్రాజెక్ట్ స్విఫ్ట్ ఉపయోగించి పూర్తి చేయవచ్చు.

అనువర్తనాన్ని రూపొందించడంలో అనుభవాన్ని పొందడంతో పాటు, మీరు నేర్చుకుంటారు:

• APIతో ఎలా పని చేయాలి
• జియోలొకేషన్‌ను ఎలా ఉపయోగించాలి
• టెక్స్ట్ ఇన్‌పుట్‌ని జోడించడం ద్వారా మీ అప్లికేషన్‌ను మరింత డైనమిక్‌గా చేయండి. దీనిలో, వినియోగదారులు నిర్దిష్ట ప్రదేశంలో వాతావరణాన్ని తనిఖీ చేయడానికి వారి స్థానాన్ని నమోదు చేయగలరు.

మీకు API అవసరం. వాతావరణ డేటాను పొందడానికి, OpenWeather APIని ఉపయోగించండి. OpenWeather API గురించి మరింత సమాచారం ఇక్కడ.

చాట్ విండో

నా చాట్ విండో చర్యలో ఉంది, రెండు బ్రౌజర్ ట్యాబ్‌లలో తెరవండి

చాట్ విండోను సృష్టించడం అనేది సాకెట్లతో ప్రారంభించడానికి సరైన మార్గం. టెక్ స్టాక్ ఎంపిక చాలా పెద్దది. Node.js, ఉదాహరణకు, ఖచ్చితంగా ఉంది.

సాకెట్లు ఎలా పని చేస్తాయి మరియు వాటిని ఎలా అమలు చేయాలో మీరు నేర్చుకుంటారు. ఇది ఈ ప్రాజెక్ట్ యొక్క ప్రధాన ప్రయోజనం.

మీరు సాకెట్‌లతో పని చేయాలనుకునే లారావెల్ డెవలపర్ అయితే, నా చదవండి వ్యాసం

గిట్‌ల్యాబ్ సిఐ

మూలం

మీరు నిరంతర ఏకీకరణ (CI)కి కొత్త అయితే, GitLab CIతో ఆడుకోండి. కొన్ని వాతావరణాలను సెటప్ చేయండి మరియు కొన్ని పరీక్షలను అమలు చేయడానికి ప్రయత్నించండి. ఇది చాలా కష్టమైన ప్రాజెక్ట్ కాదు, కానీ మీరు దీని నుండి చాలా నేర్చుకుంటారని నేను ఖచ్చితంగా అనుకుంటున్నాను. అనేక అభివృద్ధి బృందాలు ఇప్పుడు CIని ఉపయోగిస్తున్నాయి. ఎలా ఉపయోగించాలో తెలుసుకోవడం ఉపయోగకరంగా ఉంటుంది.

నువ్వు నేర్చుకుంటావు:

• GitLab CI అంటే ఏమిటి
• ఎలా కాన్ఫిగర్ చేయాలి .gitlab-ci.ymlఇది GitLab వినియోగదారుకు ఏమి చేయాలో చెబుతుంది
• ఇతర వాతావరణాలకు ఎలా అమర్చాలి

వెబ్‌సైట్ ఎనలైజర్

వెబ్‌సైట్‌ల సెమాంటిక్స్‌ను విశ్లేషించి, వాటి రేటింగ్‌ను రూపొందించే స్క్రాపర్‌ను రూపొందించండి. ఉదాహరణకు, మీరు చిత్రాలలో తప్పిపోయిన ఆల్ట్ ట్యాగ్‌లను తనిఖీ చేయవచ్చు. లేదా పేజీలో SEO మెటా ట్యాగ్‌లు ఉన్నాయో లేదో తనిఖీ చేయండి. వినియోగదారు ఇంటర్‌ఫేస్ లేకుండా స్క్రాపర్‌ని సృష్టించవచ్చు.

నువ్వు నేర్చుకుంటావు:

• స్క్రాపర్ ఎలా పని చేస్తుంది?
• DOM సెలెక్టర్లను ఎలా సృష్టించాలి
• అల్గోరిథం ఎలా వ్రాయాలి
• మీరు అక్కడితో ఆగకూడదనుకుంటే, వినియోగదారు ఇంటర్‌ఫేస్‌ను సృష్టించండి. మీరు తనిఖీ చేసే ప్రతి వెబ్‌సైట్‌లో మీరు నివేదికను కూడా సృష్టించవచ్చు.

సోషల్ నెట్‌వర్క్‌లలో సెంటిమెంట్ గుర్తింపు

మూలం

సోషల్ మీడియాలో సెంటిమెంట్ డిటెక్షన్ అనేది మెషిన్ లెర్నింగ్‌ను పరిచయం చేయడానికి ఒక గొప్ప మార్గం.

మీరు కేవలం ఒక సోషల్ నెట్‌వర్క్‌ని విశ్లేషించడం ద్వారా ప్రారంభించవచ్చు. సాధారణంగా ప్రతి ఒక్కరూ ట్విట్టర్‌తో ప్రారంభిస్తారు.

మీకు మెషిన్ లెర్నింగ్‌లో ఇప్పటికే అనుభవం ఉన్నట్లయితే, వివిధ సోషల్ నెట్‌వర్క్‌ల నుండి డేటాను సేకరించి వాటిని కలపడానికి ప్రయత్నించండి.

నువ్వు నేర్చుకుంటావు:

• మెషిన్ లెర్నింగ్ అంటే ఏమిటి

ట్రెల్లో క్లోన్

ఇండ్రెక్ లాస్న్ నుండి ట్రెల్లో క్లోన్.

మీరు ఏమి నేర్చుకుంటారు:

• అభ్యర్థన ప్రాసెసింగ్ మార్గాల సంస్థ (రూటింగ్).
• లాగివదులు.
• కొత్త వస్తువులను ఎలా సృష్టించాలి (బోర్డులు, జాబితాలు, కార్డులు).
• ఇన్‌పుట్ డేటాను ప్రాసెస్ చేయడం మరియు తనిఖీ చేయడం.
• క్లయింట్ వైపు నుండి: స్థానిక నిల్వను ఎలా ఉపయోగించాలి, స్థానిక నిల్వకు డేటాను ఎలా సేవ్ చేయాలి, స్థానిక నిల్వ నుండి డేటాను ఎలా చదవాలి.
• సర్వర్ వైపు నుండి: డేటాబేస్‌లను ఎలా ఉపయోగించాలి, డేటాబేస్‌లో డేటాను ఎలా సేవ్ చేయాలి, డేటాబేస్ నుండి డేటాను ఎలా చదవాలి.

రిపోజిటరీకి ఉదాహరణ ఇక్కడ ఉంది, React+Reduxలో తయారు చేయబడింది.

పాలన విభాగం

గితుబ్ రిపోజిటరీ.

ఒక సాధారణ CRUD అప్లికేషన్, బేసిక్స్ నేర్చుకోవడానికి అనువైనది. నేర్చుకుందాం:

• వినియోగదారులను సృష్టించండి, వినియోగదారులను నిర్వహించండి.
• డేటాబేస్తో పరస్పర చర్య చేయండి - వినియోగదారులను సృష్టించండి, చదవండి, సవరించండి, తొలగించండి.
• ఇన్‌పుట్‌ని ధృవీకరించడం మరియు ఫారమ్‌లతో పని చేయడం.

క్రిప్టోకరెన్సీ ట్రాకర్ (స్థానిక మొబైల్ యాప్)

గితుబ్ రిపోజిటరీ.

ఏదైనా: స్విఫ్ట్, ఆబ్జెక్టివ్-సి, రియాక్ట్ నేటివ్, జావా, కోట్లిన్.

అధ్యయనం చేద్దాం:

• స్థానిక అప్లికేషన్లు ఎలా పని చేస్తాయి.
• API నుండి డేటాను ఎలా తిరిగి పొందాలి.
• స్థానిక పేజీ లేఅవుట్‌లు ఎలా పని చేస్తాయి.
• మొబైల్ సిమ్యులేటర్‌లతో ఎలా పని చేయాలి.

ఈ APIని ప్రయత్నించండి. మీరు ఏదైనా మంచిదాన్ని కనుగొంటే, వ్యాఖ్యలలో వ్రాయండి.

మీకు ఆసక్తి ఉంటే, ఇదిగోండి ఇక్కడ ఒక ట్యుటోరియల్ ఉంది.

మొదటి నుండి మీ స్వంత వెబ్‌ప్యాక్ కాన్ఫిగరేషన్‌ను సెటప్ చేయండి

సాంకేతికంగా, ఇది అప్లికేషన్ కాదు, కానీ లోపల నుండి వెబ్‌ప్యాక్ ఎలా పనిచేస్తుందో అర్థం చేసుకోవడం చాలా ఉపయోగకరమైన పని. ఇప్పుడు అది "బ్లాక్ బాక్స్" కాదు, కానీ అర్థమయ్యే సాధనం.

అవసరాలు:

• es7 నుండి es5 వరకు కంపైల్ చేయండి (బేసిక్స్).
• jsx నుండి js - లేదా - .vue నుండి .js వరకు కంపైల్ చేయండి (మీరు లోడర్‌లను నేర్చుకోవాలి)
• వెబ్‌ప్యాక్ దేవ్ సర్వర్ మరియు హాట్ మాడ్యూల్ రీలోడింగ్‌ను సెటప్ చేయండి. (vue-cli మరియు create-react-app రెండింటినీ ఉపయోగిస్తాయి)
• Heroku, now.sh లేదా Githubని ఉపయోగించండి, వెబ్‌ప్యాక్ ప్రాజెక్ట్‌లను ఎలా అమలు చేయాలో తెలుసుకోండి.
• css - scss, తక్కువ, స్టైలస్ కంపైల్ చేయడానికి మీకు ఇష్టమైన ప్రిప్రాసెసర్‌ని సెటప్ చేయండి.
• వెబ్‌ప్యాక్‌తో చిత్రాలు మరియు svgలను ఎలా ఉపయోగించాలో తెలుసుకోండి.

పూర్తి ప్రారంభకులకు ఇది అద్భుతమైన వనరు.

హ్యాకర్‌న్యూస్ క్లోన్

ప్రతి జేడీ తన స్వంత హ్యాకర్‌న్యూస్‌ని తయారు చేసుకోవాలి.

మార్గంలో మీరు ఏమి నేర్చుకుంటారు:

• హ్యాకర్‌న్యూస్ APIతో ఎలా ఇంటరాక్ట్ అవ్వాలి.
• ఒకే పేజీ అప్లికేషన్‌ను ఎలా సృష్టించాలి.
• వ్యాఖ్యలను వీక్షించడం, వ్యక్తిగత వ్యాఖ్యలు, ప్రొఫైల్‌లు వంటి లక్షణాలను ఎలా అమలు చేయాలి.
• అభ్యర్థన ప్రాసెసింగ్ మార్గాల సంస్థ (రూటింగ్).

తుడుషెచ్కా

TodoMVC.

తీవ్రంగా? తుడుష్కా? వాటిలో వేల సంఖ్యలో ఉన్నాయి. కానీ నన్ను నమ్మండి, ఈ ప్రజాదరణకు కారణం ఉంది.
మీరు ప్రాథమికాలను అర్థం చేసుకున్నారని నిర్ధారించుకోవడానికి టుడు యాప్ ఒక గొప్ప మార్గం. వనిల్లా జావాస్క్రిప్ట్‌లో ఒక అప్లికేషన్ మరియు మీకు ఇష్టమైన ఫ్రేమ్‌వర్క్‌లో ఒకటి రాయడానికి ప్రయత్నించండి.

తెలుసుకోండి:

• కొత్త టాస్క్‌లను సృష్టించండి.
• ఫీల్డ్‌లు పూరించబడ్డాయో లేదో తనిఖీ చేయండి.
• ఫిల్టర్ టాస్క్‌లు (పూర్తయ్యాయి, సక్రియం, అన్నీ). వా డు filter и reduce.
• జావాస్క్రిప్ట్ యొక్క ప్రాథమికాలను అర్థం చేసుకోండి.

క్రమబద్ధీకరించగల డ్రాగ్ మరియు డ్రాప్ జాబితా

గితుబ్ రిపోజిటరీ.

అర్థం చేసుకోవడానికి చాలా ఉపకరిస్తుంది apiని లాగి వదలండి.

నేర్చుకుందాం:

• APIని లాగి వదలండి
• రిచ్ UIలను సృష్టించండి

మెసెంజర్ క్లోన్ (స్థానిక యాప్)

వెబ్ అప్లికేషన్లు మరియు స్థానిక అప్లికేషన్లు రెండూ ఎలా పని చేస్తాయో మీరు అర్థం చేసుకుంటారు, ఇది మిమ్మల్ని గ్రే మాస్ నుండి వేరు చేస్తుంది.

మేము ఏమి అధ్యయనం చేస్తాము:

• వెబ్ సాకెట్లు (తక్షణ సందేశాలు)
• స్థానిక అప్లికేషన్లు ఎలా పని చేస్తాయి.
• స్థానిక అప్లికేషన్‌లలో టెంప్లేట్‌లు ఎలా పని చేస్తాయి.
• స్థానిక అప్లికేషన్‌లలో అభ్యర్థన ప్రాసెసింగ్ మార్గాలను నిర్వహించడం.

టెక్స్ట్ ఎడిటర్

టెక్స్ట్ ఎడిటర్ యొక్క ఉద్దేశ్యం వినియోగదారులు తమ ఫార్మాటింగ్‌ను చెల్లుబాటు అయ్యే HTML మార్కప్‌గా మార్చడానికి ప్రయత్నించే ప్రయత్నాన్ని తగ్గించడం. ఒక మంచి టెక్స్ట్ ఎడిటర్ వివిధ మార్గాల్లో టెక్స్ట్‌ను ఫార్మాట్ చేయడానికి వినియోగదారులను అనుమతిస్తుంది.

ఏదో ఒక సమయంలో, ప్రతి ఒక్కరూ టెక్స్ట్ ఎడిటర్‌ని ఉపయోగించారు. కాబట్టి ఎందుకు కాదు దానిని మీరే సృష్టించుకోండి?

రెడ్డిట్ క్లోన్

Reddit సామాజిక వార్తల సముదాయం, వెబ్ కంటెంట్ రేటింగ్ మరియు చర్చా సైట్.

Reddit నా సమయాన్ని ఎక్కువగా తీసుకుంటుంది, కానీ నేను దానితో సమావేశాన్ని కొనసాగిస్తాను. Reddit క్లోన్‌ని సృష్టించడం అనేది ప్రోగ్రామింగ్ నేర్చుకోవడానికి ఒక ప్రభావవంతమైన మార్గం (అదే సమయంలో Reddit బ్రౌజ్ చేస్తున్నప్పుడు).

Reddit మీకు చాలా రిచ్‌ని అందిస్తుంది API. ఏ లక్షణాలను వదిలివేయవద్దు లేదా అస్థిరంగా పనులు చేయవద్దు. క్లయింట్లు మరియు కస్టమర్‌లు ఉన్న వాస్తవ ప్రపంచంలో, మీరు అస్థిరంగా పని చేయలేరు లేదా మీరు త్వరగా మీ ఉద్యోగాన్ని కోల్పోతారు.

స్మార్ట్ క్లయింట్లు ఉద్యోగం పేలవంగా జరుగుతోందని వెంటనే తెలుసుకుంటారు మరియు మరొకరిని కనుగొంటారు.

రెడ్డిట్ API

ఓపెన్ సోర్స్ NPM ప్యాకేజీని ప్రచురిస్తోంది

మీరు జావాస్క్రిప్ట్ కోడ్‌ని వ్రాస్తే, మీరు ప్యాకేజీ మేనేజర్‌ని ఉపయోగించే అవకాశం ఉంది. ఇతర వ్యక్తులు వ్రాసిన మరియు ప్రచురించిన ఇప్పటికే ఉన్న కోడ్‌ని మళ్లీ ఉపయోగించుకోవడానికి ప్యాకేజీ మేనేజర్ మిమ్మల్ని అనుమతిస్తుంది.

ప్యాకేజీ యొక్క పూర్తి అభివృద్ధి చక్రాన్ని అర్థం చేసుకోవడం చాలా మంచి అనుభవాన్ని అందిస్తుంది. కోడ్‌ని ప్రచురించేటప్పుడు మీరు తెలుసుకోవలసిన అనేక విషయాలు ఉన్నాయి. మీరు భద్రత, సెమాంటిక్ సంస్కరణ, స్కేలబిలిటీ, నామకరణ సంప్రదాయాలు మరియు నిర్వహణ గురించి ఆలోచించాలి.

ప్యాకేజీ ఏదైనా కావచ్చు. మీకు ఆలోచన లేకపోతే, మీ స్వంత లోడాష్‌ని సృష్టించి, దాన్ని ప్రచురించండి.

లోడాష్: lodash.com

మీరు ఆన్‌లైన్‌లో చేసిన పనిని కలిగి ఉండటం వలన మీరు ఇతరుల కంటే 10% పైన ఉంటారు. ఇక్కడ కొన్ని ఉపయోగకరమైన వనరులు ఉన్నాయి ఓపెన్ సోర్సెస్ మరియు ప్యాకేజీల గురించి.

freeCodeCamp కరికులం

FCC పాఠ్యప్రణాళిక

freeCodecamp చాలా సేకరించింది సమగ్ర ప్రోగ్రామింగ్ కోర్సు.

freeCodeCamp అనేది లాభాపేక్ష లేని సంస్థ. ఇది ఇంటరాక్టివ్ వెబ్ ఆధారిత అభ్యాస ప్లాట్‌ఫారమ్, ఆన్‌లైన్ కమ్యూనిటీ ఫోరమ్, చాట్ రూమ్‌లు, మీడియం పబ్లికేషన్‌లు మరియు ప్రతి ఒక్కరికీ అందుబాటులో ఉండేలా లెర్నింగ్ వెబ్ డెవలప్‌మెంట్ చేయడానికి ఉద్దేశించిన స్థానిక సంస్థలను కలిగి ఉంటుంది.

మీరు మొత్తం కోర్సును పూర్తి చేయగలిగితే, మీరు మీ మొదటి ఉద్యోగానికి అర్హత కంటే ఎక్కువగా ఉంటారు.

మొదటి నుండి HTTP సర్వర్‌ని సృష్టించండి

ఇంటర్నెట్‌లో కంటెంట్ ప్రయాణించే ప్రధాన ప్రోటోకాల్‌లలో HTTP ప్రోటోకాల్ ఒకటి. HTML, CSS మరియు JS వంటి స్టాటిక్ కంటెంట్‌ను అందించడానికి HTTP సర్వర్‌లు ఉపయోగించబడతాయి.

మొదటి నుండి HTTP ప్రోటోకాల్‌ను అమలు చేయగలగడం వలన విషయాలు ఎలా పరస్పరం పరస్పరం సంకర్షణ చెందుతాయి అనే దాని గురించి మీ జ్ఞానాన్ని విస్తరిస్తుంది.

ఉదాహరణకు, మీరు NodeJలను ఉపయోగిస్తే, ఎక్స్‌ప్రెస్ HTTP సర్వర్‌ని అందిస్తుందని మీకు తెలుసు.

సూచన కోసం, మీరు వీలైతే చూడండి:

• లైబ్రరీలను ఉపయోగించకుండా సర్వర్‌ని సెటప్ చేయండి
• సర్వర్ తప్పనిసరిగా HTML, CSS మరియు JS కంటెంట్‌ను అందించాలి.
• మొదటి నుండి రూటర్‌ని అమలు చేస్తోంది
• మార్పులను పర్యవేక్షించండి మరియు సర్వర్‌ను నవీకరించండి

ఎందుకు అని మీకు తెలియకపోతే, ఉపయోగించండి లాంగ్ వెళ్ళండి మరియు HTTP సర్వర్‌ని సృష్టించడానికి ప్రయత్నించండి కేడీ మొదటి నుండి.

గమనికల కోసం డెస్క్‌టాప్ యాప్

మనమందరం నోట్స్ తీసుకుంటాము, కాదా?

నోట్స్ యాప్‌ని క్రియేట్ చేద్దాం. అప్లికేషన్ గమనికలను సేవ్ చేయాలి మరియు వాటిని డేటాబేస్తో సమకాలీకరించాలి. ఎలక్ట్రాన్, స్విఫ్ట్ లేదా మీకు నచ్చిన వాటిని మరియు మీ సిస్టమ్‌కి ఏది పని చేస్తుందో దాన్ని ఉపయోగించి స్థానిక యాప్‌ను రూపొందించండి.

దీన్ని మొదటి సవాలు (టెక్స్ట్ ఎడిటర్)తో కలపడానికి సంకోచించకండి.

బోనస్‌గా, మీ డెస్క్‌టాప్ వెర్షన్‌ను వెబ్ వెర్షన్‌తో సింక్ చేయడానికి ప్రయత్నించండి.

పాడ్‌కాస్ట్‌లు (మేఘావృతమైన క్లోన్)

పాడ్‌క్యాస్ట్‌లను ఎవరు వినరు?

కింది కార్యాచరణతో వెబ్ అప్లికేషన్‌ను సృష్టించండి:

• ఒక ఎకౌంటు సృష్టించు
• పాడ్‌క్యాస్ట్‌లను శోధించండి
• పాడ్‌క్యాస్ట్‌లకు రేట్ చేయండి మరియు సభ్యత్వాన్ని పొందండి
• 30 సెకన్ల పాటు ఆపి ఆడండి, వేగం, ఫార్వర్డ్ మరియు బ్యాక్‌వర్డ్ ఫంక్షన్‌లను మార్చండి.

iTunes APIని ప్రారంభ బిందువుగా ఉపయోగించడానికి ప్రయత్నించండి. మీకు ఏవైనా ఇతర వనరుల గురించి తెలిస్తే, దయచేసి వ్యాఖ్యలలో పోస్ట్ చేయండి.

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

తెరపై చిత్రమును సంగ్రహించుట

హలో! నేను ప్రస్తుతం నా స్క్రీన్‌ని చిత్రీకరిస్తున్నాను!

మీ స్క్రీన్‌ని క్యాప్చర్ చేయడానికి మరియు క్లిప్‌ని ఇలా సేవ్ చేయడానికి మిమ్మల్ని అనుమతించే డెస్క్‌టాప్ లేదా వెబ్ యాప్‌ని సృష్టించండి .gif

ఇక్కడ కొన్ని చిట్కాలుదీన్ని ఎలా సాధించాలి.

వర్గాలు

• డెవలపర్ కోసం మరో 5 సాహసోపేతమైన శిక్షణ ప్రాజెక్ట్‌లు (లేయర్, స్క్వోష్, కాలిక్యులేటర్, వెబ్‌సైట్ క్రాలర్, మ్యూజిక్ ప్లేయర్)
• మీ ఫ్రంట్-ఎండ్ నైపుణ్యాలను మెరుగుపర్చడానికి 9 ప్రాజెక్ట్‌లు
• ఫ్రంట్-ఎండ్ డెవలపర్ కోసం ఆరు టాస్క్‌లు
• డెవలపర్ కోసం సరదా సాధన
• 8 విద్యా ప్రాజెక్టులు
• ప్రాక్టీస్ చేయడానికి ప్రాజెక్ట్‌ల యొక్క మరొక జాబితా

మూలం: www.habr.com