1. Ikloni yengcinga
Usetyenziso lweNgcaciso luyathandwa ngabaninzi; likuvumela ukuba wenze umsebenzi wakho usebenze kakuhle, usebenze ngamaxwebhu, imisebenzi yeshedyuli, kunye nokuvumelanisa idatha phakathi kwezixhobo.
Uya kufunda ntoni ngokwenza i-Clone yeNotion:
HTML Tsala kwaye ulahle i-API . Umsebenzisi unoku "bamba nge mouse" iyarhuqeka element kwaye uyibeke kuyo inokuwisa indawo.- Uyidibanisa njani idatha ngexesha lokwenyani phakathi kwekhompyuter yakho kunye ne-smartphone.
- Sivumela abasebenzisi ukuba benze, bafunde, bahlaziye kwaye bacime iirekhodi, ngaloo ndlela baqeqeshe izakhono ze-CRUD.
Eli nqaku liguqulelwe ngenkxaso ye-EDISON Software, leyoiphuhlisa usetyenziso kunye neewebhusayithi , kwakunyeutyala imali kuqaliso .
2. Repl.it clone
I-Repl.it sisixhobo sokuhlela ikhowudi yexesha lokwenyani. Unokukhetha iilwimi ezininzi: iJavaScript, iPython, Hamba kwaye usebenzise ikhowudi ngqo kwisikhangeli. Iluncedo kakhulu kwiidemos ezikhawulezayo kunye nodliwano-ndlebe lwekhowudi.
Yintoni oya kufunda ngayo ngokwenza i-Repl.it clone:
- Uyiqhuba njani kwaye uphumeze ikhowudi (icala leseva) kwisikhangeli (kwicala lomthengi).
- Funda idata yokufaka (ikhowudi yomthombo) kwaye ubonise isiphumo sokwenza.
- Uzenza njani iifayile kunye neefolda kwiwebhu kwaye ugcine iziphumo.
- Uyiqaqambisa njani ikhowudi yesintaksi.
3. Iifoto zikaGoogle Clone
Iifoto zikaGoogle yinkonzo yokugcina kunye nokwabelana ngeefoto.
Naluphi na usetyenziso lweefoto zanamhlanje lunokwenza imisebenzi esisiseko: ukulayisha, isityalo, njl. Abantu bafuna ukwenza ii-avatars zabo kwaye babelane ngeefoto zeekati, ngoko kufuneka ukwazi ukusebenza ngemifanekiso.
Yintoni oya kufunda ngayo ngokwenza i-clone yeeFoto zikaGoogle:
- Uyenza njani imifanekiso ephendulayo kwiifowuni, iitafile, iilaptops kunye nezikrini ezinkulu zikamabonwakude.
- Ukuphatha njani ukufakwa kwemifanekiso, ngakumbi imifanekiso emikhulu (> 1MB) kunye nokulayishwa okuninzi.
- Yenza iifayile zemifanekiso, nqakraza kwaye wenze ubungakanani kwakhona beefoto ze-thumbnails okanye xa uvula igalari.
- Ibhonasi: uyigcina njani imifanekiso kwilifu okanye kwisiseko sedatha yendawo.
4. Gifsky clone
Yintoni oya kufunda ngayo ngokwenza i-clone ye-Gifski:
- Uziguqula njani iifayile zevidiyo (.mp4 ukuya .gif).
- Uyisebenzisa njani i-API yokutsalwa nokulahla i-HTML.
- Indlela yokwenza umfanekiso kunye nokusebenza kakuhle.
Qaphela:
5. Ukubeka iliso amazinga e-cryptocurrency
React Native cryptocurrency tracker
Yintoni oya kufunda ngayo ngokwenza umkhondo wezinga lemali:
- Indlela yokusebenza kunye ne-API kwaye ufumane idatha ukude kwi-API.
- Indlela yokubonisa idatha njengoluhlu.
- Ibhonasi: Ukuba unomdla, ndisanda kubhala
isifundo sokwenza umkhondo wexabiso ye-cryptocurrency kunye neReact Native.
Qaphela: Apha
Ukhetho lweeprojekthi kupapasho lwangaphambili.
Ulwaleko
Umaleko luluntu apho wonke umntu anokuzoba ipixel βkwibhodiβ ekwabelwana ngayo. Umbono wokuqala wazalwa kwiReddit. Uluntu lwe-r/Layer sisikweko sokuyila ekwabelwana ngaso, ukuba wonke umntu abe ngumdali kwaye abe negalelo kwisizathu esifanayo.
Yintoni oya kufunda ngayo xa usenza iprojekthi yakho yeLayer:
- Isebenza njani iJavaScript canvas Ukwazi indlela yokusebenzisa iseyile sisakhono esibalulekileyo kwizicelo ezininzi.
- Indlela yokulungelelanisa iimvume zabasebenzisi. Umsebenzisi ngamnye unokuzoba ipixel enye rhoqo ngemizuzu eli-15 ngaphandle kokungena.
- Yenza iiseshini zecookies.
Squoosh
I-Squoosh sisicelo sokucinezela umfanekiso kunye neenketho ezininzi eziphambili.
GIF 20 MB
Ngokwenza eyakho inguqulelo yeSquoosh uya kufunda:
- Indlela yokusebenza ngeesayizi zemifanekiso
- Funda izinto ezisisiseko Drag'n'Drop API
- Qonda indlela i-API kunye nabaphulaphuli besiganeko basebenza ngayo
- Indlela yokulayisha kunye nokuthumela ngaphandle iifayile
Qaphela: Icompressor yomfanekiso yindawo. Akuyimfuneko ukuthumela idatha eyongezelelweyo kumncedisi. Unokuba necompressor ekhaya, okanye ungayisebenzisa kwiseva, ukhetho lwakho.
Calculator
Ima kancinci? Ngokunyanisekileyo? Isibali-manani? Ewe, ngokuchanekileyo, i-calculator. Ukuqonda iziseko zezibalo kunye nendlela ezisebenzisana ngayo sisakhono esibalulekileyo sokwenza lula usetyenziso lwakho. Kungekudala okanye kamva kuya kufuneka ujongane namanani kwaye ngokukhawuleza kungcono.
Ngokwenza esakho isixhobo sokubala uya kufunda:
- Sebenza ngamanani kunye nokusebenza kwezibalo
- Ziqhelanise nabaphulaphuli besiganeko API
- Indlela yokucwangcisa izinto, ukuqonda izitayela
I-Crawler (injini yokukhangela)
Wonke umntu usebenzise injini yokukhangela, kutheni ungazenzi eyakho? Abakhasi bayafuneka ukukhangela ulwazi. Wonke umntu uzisebenzisa yonke imihla kwaye imfuno yale teknoloji kunye neengcali ziya kukhula ngokuhamba kwexesha.
Injini yokukhangela kaGoogle
Uya kufunda ntoni ngokwenza eyakho injini yokukhangela:
- Basebenza njani abakhasi
- Ungazibala njani iisayithi kunye nendlela yokuzibeka ngokwereyithingi kunye nodumo
- Indlela yokugcina iisayithi ezinesalathisi kwisiseko sedatha kunye nendlela yokusebenza kunye nesiseko sedatha
Umdlali woMculo (Spotify, Apple Music)
Wonke umntu umamela umculo - yinxalenye nje ebalulekileyo yobomi bethu. Masenze isidlali somculo ukuze siqonde ngcono ukuba oomatshini abasisiseko beqonga lokusasaza umculo basebenza njani.
Spotify
Yintoni oya kuyifunda ngokwenza iqonga lakho lokusasaza umculo:
- Usebenza njani nge-API. sebenzisa i-API esuka kwiSpotify okanye iApple Music
- Idlalwa njani, nqumama okanye ubuye umva ukuya kwingoma elandelayo/yangaphambili
- Indlela yokutshintsha umthamo
- Indlela yokulawula umzila womsebenzisi kunye nembali yesikhangeli
I-app yokukhangela imuvi usebenzisa i-React (enegwegwe)
Into yokuqala onokuthi uqale ngayo kukwenza usetyenziso lokukhangela imuvi usebenzisa iReact. Apha ngezantsi ngumfanekiso wokuba isicelo sokugqibela siya kujongeka njani:
Uza kufunda ntoni
Ngokwakha le app, uyakuphucula izakhono zakho zeReact ngokusebenzisa iHooks API entsha. Umzekelo weprojekthi usebenzisa i-React components, ii-hooks ezininzi, i-API yangaphandle, kwaye ngokuqinisekileyo isimbo se-CSS.
Isitaki sobugcisa kunye neempawu
- Yabelana ngamagwegwe
- Yakha-yenza-app
- JSX
- CSS
Ngaphandle kokusebenzisa naziphi na iiklasi, ezi projekthi zikunika indawo efanelekileyo yokungena kwi-Functional React kwaye ngokuqinisekileyo ziya kukunceda ngo-2020. ungafumana
Ncokola App kunye Vue
Enye iprojekthi enkulu onokuyenza kukwenza usetyenziso lwencoko usebenzisa ilayibrari yam endiyithandayo yeJavaScript: VueJS. Isicelo siya kujongeka ngolu hlobo:
Uza kufunda ntoni
Kwesi sifundo, uya kufunda ukwenza i-app ye-Vue ukusuka ekuqaleni-ukwenza izinto, ukuphatha ilizwe, ukwenza iindlela, ukuqhagamshela kwiinkonzo zomntu wesithathu, kunye nokuphatha ubunyani.
Isitaki sobugcisa kunye neempawu
- Vue
- vux
- Vue Router
- Jonga i-CLI
- Ukuqhubela phambili
- CSS
Le yiprojekthi entle ngokwenene ukuqalisa ngeVue okanye uphucule izakhono zakho ezikhoyo ukuze ungene kuphuhliso ngo-2020. ungafumana
Imozulu entle ene-Angular 8
Lo mzekelo uya kukunceda wenze imozulu entle usebenzisa iAngular 8:
Uza kufunda ntoni
Le projekthi iya kukufundisa izakhono ezixabisekileyo ekwakheni izicelo ukusuka ekuqaleni - ukusuka kuyilo ngophuhliso, yonke indlela ukuya kwisicelo esilungele ukuthunyelwa.
Isitaki sobugcisa kunye neempawu
- I-angular 8
- Firebase
- Unikezelo lwecala lomncedisi
- CSS kunye Grid kunye Flexbox
- Mobile friendly kunye nokuguquguquka
- Imo emnyama
- Ujongano oluhle
Eyona nto ndiyithanda kakhulu ngale projekthi ibandakanya konke kukuba awufundi izinto wedwa. Endaweni yoko, ufunda yonke inkqubo yophuhliso, ukusuka kuyilo ukuya ekuhanjisweni kokugqibela.
Ukwenza isicelo usebenzisa iSvelte
I-Svelte ifana nomntwana omtsha kwindlela esekwe kwinxalenye - ubuncinci iyafana neReact, Vue kunye ne-Angular. Kwaye le yenye yezona mveliso zishushu kakhulu zika-2020.
Ii-apps ze-To-Do ayisosona sihloko sishushu, kodwa iya kukunceda ngenene ulolonge izakhono zakho ze-Svelte. Iya kujongeka ngolu hlobo:
Uza kufunda ntoni
Esi sifundo siya kukubonisa indlela yokwenza isicelo usebenzisa iSvelte 3, ukusuka ekuqaleni ukuya ekugqibeleni. Uya kusebenzisa amacandelo, isimbo, kunye nabaphathi beminyhadala
Isitaki sobugcisa kunye neempawu
- Inyathelo 3
- Izixhobo
- Isitayile ngeCSS
- ES 6 isivakalisi
Azikho zininzi iiprojekthi ezilungileyo zokuqalisa iSvelte, ndiye ndafumanisa
I-app yorhwebo usebenzisa i-Next.js
I-Next.js sesona sikhokelo sidumileyo sokwakha React izicelo ezixhasa unikezelo lwecala lomncedisi ngaphandle kwebhokisi.
Le projekthi iya kukubonisa indlela yokwenza isicelo se-e-commerce esijongeka ngolu hlobo:
Uza kufunda ntoni
Kule projekthi, uya kufunda indlela yokuphuhlisa nge-Next.js-yenza amaphepha amatsha kunye namalungu, khupha idatha, kunye nesimbo kwaye usebenzise i-Elandelayo isicelo.
Isitaki sobugcisa kunye neempawu
- Okulandelayo.js
- Amacandelo kunye namaphepha
- Isampula yedatha
- Isimbo
- Ukusasazwa kweProjekthi
- I-SSR kunye ne-SPA
Kuhlala kukuhle ukuba nomzekelo wehlabathi lokwenyani njenge-app ye-e-commerce yokufunda into entsha. Unga
Iblogi egcwele iilwimi ezininzi ene-Nuxt.js
I-Nuxt.js yeyeVue, yintoni i-Next.js ye-React: isakhelo esikhulu sokudibanisa amandla onikezelo lwecala lomncedisi kunye nezicelo zephepha elinye.
Isicelo sokugqibela onokusenza siya kujongeka ngolu hlobo:
Uza kufunda ntoni
Kule projekthi yesampulu, uya kufunda ukwenza iwebhusayithi epheleleyo usebenzisa i-Nuxt.js, ukusuka kulungiselelo lokuqala ukuya ekusetyenzisweni kokugqibela.
Ithatha ithuba lobuninzi beempawu ezipholileyo ezinokunikezelwa yiNuxt, njengamaphepha kunye namacandelo, kunye nesimbo nge-SCSS.
Isitaki sobugcisa kunye neempawu
- I-Nuxt.js
- Amacandelo kunye namaphepha
- Imodyuli yebali
- Hagfish
- I-Vuex yolawulo lukarhulumente
- I-SCSS yokwenza isimbo
- Nuxt middlewares
Ibhlog kunye neGatsby
I-Gatsby yeyona ndawo igqwesileyo yejenereyitha yesiza esebenzisa iReact kunye neGraphQL. Esi sisiphumo seprojekthi:
Uza kufunda ntoni
Kule tutorial, uya kufunda ukusebenzisa iGatsby ukwenza ibhlog oya kuyisebenzisa ukubhala amanqaku akho usebenzisa iReact kunye neGraphQL.
Isitaki sobugcisa kunye neempawu
- Kwimigby
- usabela
- IgrafuQL
- Iiplagi kunye nemixholo
- MDX/Markdown
- I-Bootstrap CSS
- Iipateni
Ukuba ukhe wafuna ukuqala ibhlog,
Anditsho ukuba i-WordPress lukhetho olubi, kodwa ngeGatsby unokwakha iiwebhusayithi ezisebenza kakhulu usebenzisa iReact - eyindibaniselwano emangalisayo.
Ibhlog eneGridsome
Gridsome for Vue... Kulungile, besele sinalo ngokulandelayo/Nuxt.
Kodwa kuyafana nakwiGridsome kunye neGatsby. Bobabini basebenzisa iGraphQL njengomaleko wabo wedatha, kodwa iGridsome isebenzisa iVueJS. Le ikwayinto emangalisayo yejenereyitha yesiza eya kukunceda wenze iibhlog ezintle:
Uza kufunda ntoni
Le projekthi iya kukufundisa indlela yokwenza iblogi elula ukuze uqalise ngeGridsome, GraphQL kunye neMarkdown. Ikwabandakanya indlela yokufaka isicelo ngeNetlify.
Isitaki sobugcisa kunye neempawu
- Igridsome
- Vue
- IgrafuQL
- Markdown
- Yenza
Ngokuqinisekileyo ayisosona sifundo sibanzi, kodwa sigubungela iikhonsepthi ezisisiseko zeGridsome kunye
I-SoundCloud-efana nomdlali we-audio usebenzisa i-Quasar
I-Quasar sesinye isakhelo se-Vue esinokusetyenziswa ukwenza usetyenziso lweselula. Kule projekthi uya kwenza isicelo somdlali ovakalayo, umzekelo:
Uza kufunda ntoni
Ngelixa ezinye iiprojekthi zijolise ikakhulu kwizicelo zewebhu, le iya kukubonisa indlela yokwenza isicelo esiphathwayo usebenzisa iVue kunye nesakhelo seQuasar.
Kuya kufuneka ukuba sele unayo iCordova esebenzayo kunye ne-Android Studio/Xcode emiselweyo. Ukuba akunjalo, le ncwadana inekhonkco kwiwebhusayithi yeQuasar apho ikubonisa indlela yokuseta yonke into.
Isitaki sobugcisa kunye neempawu
- Ngekota
- Vue
- Cordova
- WaveSurfer
- Amacandelo e-UI
Ifomu yekhadi letyala
Ubume bekhadi letyala elipholileyo elinonxibelelwano oluthambileyo nolonwabisayo lwemicro. Ibandakanya ukufomatha inombolo, uqinisekiso kunye nobhaqo oluzenzekelayo uhlobo lwekhadi. Yakhiwe kwi-Vue.js kwaye ikwaphendula ngokupheleleyo. (Ungabona
Uya kufunda ntoni:
- Inkqubo kwaye uqinisekise iifomu
- Bamba imisitho (umzekelo, xa amabala etshintsha)
- Qonda indlela yokubonisa kunye nokubeka izinto kwiphepha, ngakumbi ulwazi lwekhadi letyala elivela phezulu kwifomu
igrafu yebha
I-histogram yitshathi okanye igrafu emele idata yodidi eneentsimbi ezixande ezinobude okanye ubude obulungelelanisiweyo kumaxabiso eziwameleyo.
Zingasetyenziswa ngokuthe nkqo okanye ngokuthe tye. Itshathi yebha ethe nkqo ngamanye amaxesha ibizwa ngokuba yitshathi yomgca.
Uya kufunda ntoni:
- Bonisa idatha ngendlela eyakhiweyo neqondakalayo
- Ukongeza: Funda indlela yokusebenzisa isiqalelo
canvas
kunye nendlela yokuzoba izinto ngayo
Twitter Heart oopopayi
Emuva kwi-2016, i-Twitter yazisa le mifanekiso emangalisayo yeetweets zayo. Ukusukela ngo-2019, isajongeka njengenxalenye, kutheni ungazenzi ngokwakho?
Uya kufunda ntoni:
- Sebenza ngophawu lweCSS
keyframes
- Lawula kwaye uphilise izinto ze-HTML
- Hlanganisa iJavaScript, iHTML kunye neCSS
Iindawo zokugcina ze-GitHub eziphendliweyo
Akukho nto intle apha-iGitHub zokugcina luluhlu oluzukisiweyo.
Injongo kukubonisa iindawo zokugcina kwaye uvumele umsebenzisi ukuba azihluze. Sebenzisa
Iphepha leprofayile yeGitHub -
Uya kufunda ntoni:
- Fumana idatha kwi-API
- Bonisa idatha esuka kwi-API
- Hlunga kwaye ubonise idatha efanelekileyo kukhangelo ngalunye
- Ukuzikhethela: Ukuba ulungele umngeni, sebenzisa
I-API v4 , yakhiwe kusetyenziswa iGraphQL.Ukuba ufuna ukufunda iGraphQL, yiya kwelinye lamanqaku am angaphambili .
Iincoko zesimbo seReddit
Iincoko ziyindlela edumileyo yonxibelelwano ngenxa yokulula kunye nokusebenziseka ngokulula. Kodwa yintoni ephembelela amagumbi okuncokola anamhlanje? WebSockets!
Uya kufunda ntoni:
- Sebenzisa iWebSockets, unxibelelwano lwexesha langempela kunye nohlaziyo lwedatha
- Sebenza ngamanqanaba okufikelela komsebenzisi (umzekelo, umnini wesiteshi sengxoxo unendima
admin
, kunye nabanye egumbini -user
) - Inkqubo kwaye uqinisekise iifom - khumbula, ifestile yengxoxo yokuthumela umyalezo
input
- Yenza kwaye ujoyine iingxoxo ezahlukeneyo
- Sebenza ngemiyalezo yakho. Abasebenzisi banokuncokola nabanye abasebenzisi ngasese. Ngokusisiseko, uya kuseka unxibelelwano lweWebSocket phakathi kwabasebenzisi ababini.
Ukukhangela isimbo somtya
Yintoni eyenza le navigation ibe yodwa kukuba isikhongozeli se-popover siyatshintsha ukuze silingane nomxholo. Kukho ubuhle kolu tshintsho xa kuthelekiswa nokuziphatha kwendabuko yokuvula kunye nokuvala i-popover entsha.
Uya kufunda ntoni:
- Dibanisa oopopayi beCSS kunye neenguqu
- Dim umxholo kwaye usebenzise iklasi esebenzayo kwinto edadayo
Pacman
Yenza inguqulelo yakho yePacman. Le yindlela entle yokufumana umbono wendlela imidlalo ephuhliswa ngayo kunye nokuqonda iziseko. Sebenzisa isakhelo seJavaScript, React okanye Vue.
Uya kufunda:
- Zihamba njani izinto
- Indlela yokumisela ukuba ngawaphi amaqhosha omawucofe
- Indlela yokumisela umzuzu wokungqubana
- Ungaya phambili kwaye wongeze ulawulo lwentshukumo yesiporho
Uya kufumana umzekelo wale projekthi
ulawulo lomsebenzisi
Le projekthi
Ukudala uhlobo lwe-CRUD yesicelo solawulo lomsebenzisi luya kukufundisa iziseko zophuhliso. Oku kuluncedo ngakumbi kubaphuhlisi abatsha.
Uya kufunda:
- Yintoni indlela
- Indlela yokusingatha iifom zokungeniswa kwedatha kwaye ukhangele oko afakwe ngumsebenzisi
- Indlela yokusebenza kunye nesiseko sedatha - yenza, funda, uhlaziye kwaye ucime izenzo
Ukujonga imozulu kwindawo okuyo
Le projekthi
Ukuba ufuna ukwenza ii -apps, qala nge-app yemozulu. Le projekthi inokugqitywa kusetyenziswa i-Swift.
Ukongeza ekufumaneni amava okwakha isicelo, uya kufunda:
- Usebenza njani nge-API
- Indlela yokusebenzisa i-geolocation
- Yenza usetyenziso lwakho luguquke ngakumbi ngokongeza igalelo lombhalo. Kuyo, abasebenzisi baya kuba nakho ukungena kwindawo yabo ukujonga imozulu kwindawo ethile.
Uya kufuna i-API. Ukufumana idatha yemozulu, sebenzisa i-OpenWeather API. Ulwazi oluninzi malunga ne-OpenWeather API
Ifestile yokuncokola
Ifestile yam yencoko iyasebenza, vula kwiithebhu ezimbini zebrawuza
Ukwenza ifestile yengxoxo yindlela efanelekileyo yokuqalisa ngeesokethi. Ukhetho lwe-tech stack lukhulu. I-Node.js, umzekelo, ilungile.
Uya kufunda ukuba iisokethi zisebenza njani kunye nendlela yokuzisebenzisa. Le yeyona nzuzo iphambili yale projekthi.
Ukuba ungumphuhlisi weLaravel ofuna ukusebenza ngeesokethi, funda eyam
IGitLab CI
Ukuba umtsha kuhlanganiso oluqhubekayo (CI), dlala malunga neGitLab CI. Cwangcisa iindawo ezimbalwa kwaye uzame ukuqhuba iimvavanyo ezimbalwa. Asiyoprojekthi inzima kakhulu, kodwa ndiqinisekile ukuba uya kufunda okuninzi kuyo. Amaqela amaninzi ophuhliso ngoku asebenzisa iCI. Ukwazi indlela yokuyisebenzisa kuluncedo.
Uya kufunda:
- Yintoni iGitLab CI
- Indlela yokuqwalasela
.gitlab-ci.yml
exelela umsebenzisi weGitLab ukuba makenze ntoni - Ukusasazwa njani kwezinye iindawo
Umhlalutyi wewebhusayithi
Yenza i-scraper ehlalutya i-semantics yewebhusayithi kwaye yenza ukulinganisa kwabo. Umzekelo, ungajonga iithegi zealt ezingekhoyo kwimifanekiso. Okanye khangela ukuba iphepha lineethegi ze-SEO meta. I-scraper inokudalwa ngaphandle kojongano lomsebenzisi.
Uya kufunda:
- Isebenza njani i-scraper?
- Ubenza njani abakhethi be-DOM
- Indlela yokubhala i-algorithm
- Ukuba awufuni ukuma apho, yenza ujongano lomsebenzisi. Unokwenza ingxelo kwiwebhusayithi nganye oyijongayo.
Ukubonwa kweemvakalelo kwiinethiwekhi zentlalo
Ukubonwa kweemvakalelo kumajelo eendaba zentlalo yindlela entle yokwazisa ukufunda koomatshini.
Unokuqala ngokuhlalutya inethiwekhi enye yokuncokola. Wonke umntu uhlala eqala nge-Twitter.
Ukuba sele unamava ngokufunda koomatshini, zama ukuqokelela idatha kwiinethiwekhi ezahlukeneyo zentlalo kwaye uzidibanise.
Uya kufunda:
- Yintoni ukufunda ngomatshini
Trello clone
Yintoni oya kufunda ngayo:
- Ulungelelwaniso lweendlela zokusetyenzwa kwesicelo (Umzila).
- Yitsale uyiwise.
- Indlela yokudala izinto ezintsha (iibhodi, izintlu, amakhadi).
- Ukucubungula kunye nokujonga idatha yegalelo.
- Ukusuka kwicala lomxhasi: indlela yokusebenzisa ukugcinwa kwendawo, indlela yokugcina idatha kwindawo yokugcina indawo, indlela yokufunda idatha kwindawo yokugcina indawo.
- Ukusuka kwicala lomncedisi: indlela yokusebenzisa i-database, indlela yokugcina idatha kwi-database, indlela yokufunda idatha kwi-database.
Iphaneli yomlawuli
Isicelo esilula se-CRUD, esilungele ukufunda iziseko. Masifunde:
- Yenza abasebenzisi, lawula abasebenzisi.
- Sebenzisana nesiseko sedatha - yenza, funda, uhlele, cima abasebenzisi.
- Ukuqinisekisa igalelo kunye nokusebenza ngeefom.
I-Cryptocurrency tracker (i-app yemveli yeselula)
Nantoni na: Swift, Objective-C, React Native, Java, Kotlin.
Masifunde:
- Zisebenza njani izicelo zemveli.
- Indlela yokubuyisela idatha kwi-API.
- Uyilo lwephepha lemveli lusebenza njani.
- Usebenza njani kunye ne-simulators ephathwayo.
Ukuba unomdla, nantsi
Cwangcisa eyakho i-webpack config ukususela ekuqaleni
Ngokobuchwephesha, esi ayisosicelo, kodwa ngumsebenzi oluncedo kakhulu ukuqonda ukuba i-webpack isebenza njani ngaphakathi. Ngoku akuyi kuba "ibhokisi elimnyama", kodwa isixhobo esiqondakalayo.
Izinto ezifunekayo:
- Hlanganisa i-es7 ukuya kwi-es5 (iziseko).
- Qokelela i-jsx ukuya ku-js - okanye - .vue ukuya kwi-.js (kuya kufuneka ufunde izilayishi)
- Cwangcisa iseva ye-webpack dev kunye nokulayishwa kwakhona kwemodyuli eshushu. (Vue-cli kwaye udale-react-app sebenzisa zombini)
- Sebenzisa i-Heroku, ngoku.sh okanye i-Github, funda indlela yokubeka iiprojekthi ze-webpack.
- Cwangcisa iprosesa yakho oyithandayo ukuze uqokelele i-css - scss, ngaphantsi, istylus.
- Funda indlela yokusebenzisa imifanekiso kunye neesvgs nge-webpack.
Hackernews clone
Yonke iJedi iyafuneka ukuba yenze eyakhe iHackernews.
Oko uya kufunda endleleni:
- Indlela yokusebenzisana ne-hackernews API.
- Uyenza njani isicelo sephepha elinye.
- Indlela yokuphumeza iimpawu ezifana nokujonga izimvo, izimvo zomntu ngamnye, iiprofayili.
- Ulungelelwaniso lweendlela zokusetyenzwa kwesicelo (Umzila).
Tudushechka
Ngokunyanisekileyo? Tudushka? Kukho amawaka awo. Kodwa ndikholelwe, kukho isizathu solu dumo.
Usetyenziso lweTudu yindlela entle yokuqinisekisa ukuba uyaziqonda iziseko. Zama ukubhala isicelo esinye kwi-vanilla Javascript kunye nesinye kwisakhelo osithandayo.
Funda:
- Yenza imisebenzi emitsha.
- Khangela ukuba iindawo zizaliswe na.
- Imisebenzi yokucoca (igqityiwe, iyasebenza, yonke). Sebenzisa
filter
ΠΈreduce
. - Qonda iziseko zeJavascript.
Uluhlu lokutsala nolulahla oluhlelwayo
Kuluncedo kakhulu ukuqonda
Masifunde:
- Tsala kwaye ulahle i-API
- Yenza ii-UIs ezityebileyo
Isixhobo somthunywa (usetyenziso lwemveli)
Uya kuqonda ukuba zombini izicelo zewebhu kunye nezicelo zomthonyama zisebenza njani, nto leyo eya kukwahlula kubunzima obungwevu.
Siza kufunda ntoni:
- Iisokethi zewebhu (imiyalezo yangoko)
- Zisebenza njani izicelo zemveli.
- Iitemplates zisebenza njani kwizicelo zomthonyama.
- Ukulungiselela iindlela zokusetyenzwa kwesicelo kwizicelo zomthonyama.
Umhleli wombhalo
Injongo yomhleli wombhalo kukunciphisa umzamo wabasebenzisi abazama ukuguqula ukufomatha kwabo kwimarkup ye-HTML esebenzayo. Umhleli wombhalo olungileyo uvumela abasebenzisi ukuba bafomethe isicatshulwa ngeendlela ezahlukeneyo.
Ngexesha elithile, wonke umntu usebenzise umhleli wombhalo. Ngoko kutheni kungenjalo
Reddit clone
I-Reddit ithatha ixesha lam elininzi, kodwa ndiyaqhubeka nokuxhoma kuyo. Ukudala iReddit clone yindlela esebenzayo yokufunda inkqubo (ngelixa ubrawuza iReddit ngaxeshanye).
I-Reddit ikubonelela ngesityebi kakhulu
Abathengi abahlakaniphile baya kuqonda ngokukhawuleza ukuba umsebenzi wenziwa kakubi kwaye uya kufumana omnye umntu.
Ukupapasha iphakheji ye-NPM yomthombo ovulekileyo
Ukuba ubhala ikhowudi yeJavascript, amathuba okuba usebenzise umphathi wepakethe. Umphathi wepakethe ikuvumela ukuba usebenzise kwakhona ikhowudi esele ibhaliwe kwaye yapapashwa ngabanye abantu.
Ukuqonda umjikelo opheleleyo wophuhliso lwephakheji kuya kubonelela ngamava amahle kakhulu. Zininzi izinto ekufuneka uzazi xa upapasha ikhowudi. Kuya kufuneka ucinge ngokhuseleko, uguqulelo lwesemantic, ukulinganisa, ukubiza amagama kunye nokugcinwa.
Iphakheji ingaba nantoni na. Ukuba awunambono, yenza i-Lodash yakho kwaye uyipapashe.
Lodash:
Ukuba nento oyenzileyo kwi-intanethi kukubeka i-10% ngaphezu kwabanye.
IKharityhulam yeCodeCamp yasimahla
I-freeCodecamp iqokelele kakhulu
freeCodeCamp ngumbutho ongenzi nzuzo. Iqulathe iqonga lokufunda elisekelwe kwiwebhu elisebenzisanayo, iforam yoluntu ekwi-intanethi, amagumbi okuncokola, ushicilelo oluPhakathi, kunye nemibutho yasekuhlaleni enenjongo yokwenza uphuhliso lwewebhu lokufunda lufikeleleke kuye wonke umntu.
Uya kuba ngaphezu kofanelekela umsebenzi wakho wokuqala ukuba ukwazi ukugqiba ikhosi yonke.
Yenza iseva yeHTTP ukusuka ekuqaleni
Iprotocol yeHTTP yenye yeeprothokholi eziphambili apho umxholo uhamba khona kwi-Intanethi. Iiseva ze-HTTP zisetyenziselwa ukukhonza umxholo ongatshintshiyo njenge-HTML, i-CSS, kunye ne-JS.
Ukukwazi ukuphumeza iprotocol yeHTTP ukusuka ekuqaleni kuya kwandisa ulwazi lwakho malunga nendlela izinto ezisebenzisana ngayo.
Umzekelo, ukuba usebenzisa i-NodeJs, ngoko uyazi ukuba i-Express ibonelela ngeseva ye-HTTP.
Ukufumana ireferensi, jonga ukuba ungakwazi:
- Seta iseva ngaphandle kokusebenzisa nawaphi na amathala eencwadi
- Umncedisi kufuneka anike umxholo we-HTML, CSS kunye ne-JS.
- Ukusebenzisa i-router ukusuka ekuqaleni
- Lawula utshintsho kwaye uhlaziye iseva
Ukuba awuyazi ukuba kutheni, sebenzisa
Usetyenziso lweDesktop lwamanqaku
Sonke siyawabhala amanqaku, akunjalo?
Masenze usetyenziso lwamanqaku. Isicelo kufuneka sigcine amanqaku kwaye singqamanise nesiseko sedatha. Yakha usetyenziso lwemveli usebenzisa i-Electron, iSwift, okanye nantoni na oyithandayo kwaye yintoni esebenzela inkqubo yakho.
Zive ukhululekile ukudibanisa oku kunye nomngeni wokuqala (umhleli wokubhaliweyo).
Njengebhonasi, zama ukungqamanisa inguqulelo yedesktop yakho kunye noguqulelo lwewebhu.
Iipodcasts (iklone yokusibekela)
Ngubani ongamameli iipodcasts?
Yenza usetyenziso lwewebhu ngolu setyenziso lulandelayo:
- Dala i-akhawunti
- Phendla iiPodcast
- Thetha kwaye urhume kwiipodcasts
- Yima kwaye udlale, tshintsha isantya, imisebenzi yangaphambili nasemva imizuzwana engama-30.
Zama ukusebenzisa iTunes API njengendawo yokuqala. Ukuba uyazi naziphi na ezinye izixhobo, nceda uthumele kumagqabantshintshi.
Ukuthathwa kwesikrini
Mholo! Ndicofa iscreen sam ngoku!
Yenza i-desktop okanye i-app yewebhu ekuvumela ukuba ubambe isikrini sakho kwaye ugcine ikliphu njenge .gif
Apha
Imithombo
Iiprojekthi ezi-5 ezongezelelekileyo zoqeqesho lomphuhlisi (uMaleko, iSquoosh, iKhatyhuleyitha, uMkhandi weWebhusayithi, uMdlali woMculo) Iiprojekthi ezili-9 zokulola izakhono zakho ze-Front-End Imisebenzi emithandathu yomphuhlisi we-Front-End Ukonwabisa umphuhlisi -
Iiprojekthi zemfundo ezisi-8 -
Olunye uluhlu lweeprojekthi zokuziqhelanisa
umthombo: www.habr.com