1. Fikradda clone
Codsiga fikradda waxaa jecel dad badan;
Waxa aad ku baran doonto adiga oo abuuraya Notion clone:
- . Isticmaaluhu wuxuu "ku qabsan karaa jiirka" la jiidi karo curiye oo dhig dhici karta aagga.
- Sida loo wada shaqeeyo xogta wakhtiga dhabta ah inta u dhaxaysa kombiyuutarkaaga iyo casriga
- Waxaan u oggolaan isticmaaleyaasha inay abuuraan, akhriyaan, cusboonaysiiyaan oo tirtiraan diiwaannada, si ay u tababaraan xirfadaha CRUD.
Maqaalka waxaa lagu turjumay iyadoo ay taageerayaan EDISON Software, kaas oo Markaasay .
2. Repl.it clone
Repl.it waa qalab loogu talagalay tafatirka koodka wada shaqayneed ee wakhtiga dhabta ah. Waxaad dooran kartaa dhowr luqadood: JavaScript, Python, Go oo si toos ah koodhka ugu socodsiiso browserka. Aad faa'iido u leh bandhigyada degdega ah iyo wareysiyada koodka.
Waxa aad ku baran doonto adiga oo abuuraya Repl.it clone:
- Sida loo socodsiiyo oo loo fuliyo koodka (server-side) browserka (macmiilka-dhinaca).
- Akhri xogta gelinta (code code) oo muuji natiijada fulinta.
- Sida loo abuuro faylal iyo faylal shabakada dhexdeeda oo loo kaydiyo natiijooyinka.
- Sida loo iftiimiyo syntax code.
3. Sawirada Google Clone
Sawirada Google waa adeeg kaydinta iyo wadaaga sawirada
Codsi kasta oo sawir casri ah ayaa qaban kara hawlaha aasaasiga ah: soo dejinta, dalagga, iwm. Dadku waxay rabaan inay abuuraan avatars iyaga u gaar ah oo ay wadaagaan sawirada bisadaha, markaa waxaad u baahan tahay inaad awood u yeelatid inaad la shaqeyso sawirada.
Waxa aad ku baran doonto adiga oo abuuraya Google Photos clone:
- Sida loo abuuro sawiro jawaab celin leh taleefannada, tablet-yada, laptop-yada iyo xitaa shaashadaha TV-ga weyn.
- Sida loo maareeyo sawir gelinta, gaar ahaan sawirada waaweyn (> 1MB) iyo raritaanka bulk.
- Habee faylalka sawirka, jar oo cabbir sawirada sawirada thumbnails ama marka la furayo gallery.
- Gunno: sida loo kaydiyo sawirada daruuraha ama xogta deegaanka.
4. Gifsky clone
wuxuu u beddelaa muuqaal GIF GIF isagoo isticmaalaya hawlaha si loo helo palette-frame-gaaban oo hufan iyo ka-hortagga ku-meel-gaadhka ah. Natiijadu waa GIF oo leh kumanaan ubax ah qaabkiiba.
Waxa aad ku baran doonto adoo abuuraya Gifski clone:
- Sida loo beddelo faylalka fiidiyowga (.mp4 ilaa .gif).
- Sida loo isticmaalo Jiid iyo Tuur HTML API.
- Sida hagaajinta sawirka iyo habayntu u shaqeyso.
Fiiro gaar ah: oo waxay ku taal GitHub!
5. La socodka qiimaha cryptocurrency
Ka fal celi raadraaca cryptocurrency ee asalka ah
Waxa aad ku baran doonto adiga oo abuuraya tracker heerka lacagta:
- Sida loola shaqeeyo API-ga oo xogta meel fog looga helo API-ga.
- Sida loo muujiyo xogta liis ahaan.
- Gunno: Haddii aad xiisaynayso, dhawaan ayaan qoray loogu talagalay cryptocurrency leh React Native.
Fiiro gaar ah: halkan .
Xulashada mashaariicda daabacaadadii hore.
lakabka
Lakabku waa bulsho halkaas oo qof walba uu ku sawiri karo pixel "board" la wadaago. Fikradda asalka ah waxay ku dhalatay Reddit. Bulshada r/Layer waa hal-abuurka la wadaago, in qof kastaa uu noqon karo hal-abuur, waxna ku biirin karo qadiyad guud.
Waxa aad baran doonto marka aad samaynayso mashruuca lakabkaaga:
- Sida shiraac JavaScript u shaqeeyo Ogaanshaha sida loo isticmaalo shiraac waa xirfad muhiim u ah codsiyo badan.
- Sida loo isku xidho ogolaanshaha isticmaalaha. Isticmaale kastaa waxa uu sawiri karaa hal pixel 15kii daqiqiba isaga oo aan u baahnayn in uu galo.
- Samee fadhiyada buskudka
Caanoor
Squoosh waa codsi isku-duubid muuqaal leh oo leh doorashooyin badan oo horumarsan.
GIF 20 MB
Markaad abuurto noocaaga Squoosh waxaad baran doontaa:
- Sida loogu shaqeeyo cabbirrada sawirka
- Baro aasaaska Drag'n'Drop API
- Faham sida API-ga iyo dhagaystayaashu u shaqeeyaan
- Sida loo geliyo loona dhoofiyo faylasha
Fiiro gaar ah: Compressor sawirku waa maxalli Muhiim ma aha in xog dheeraad ah loo diro server-ka. Waxaad ku haysan kartaa kombaresarada guriga, ama waxaad ku isticmaali kartaa server-ka, doorashadaada.
Xisaabiye
Kaalay? Dhab ahaantii? Xisaabiyaha? Haa, dhab ahaan, xisaabiye. Fahamka aasaaska hawlgallada xisaabta iyo sida ay u wada shaqeeyaan waa xirfad muhiim u ah fududaynta codsiyadaada. Dhawaan ama hadhow waa inaad wax ka qabataa tirooyinka oo sida ugu dhaqsaha badan ayaa fiican.
Markaad sameysato xisaabiyahaaga waxaad baran doontaa:
- La shaqee tirooyinka iyo hawlaha xisaabta
- Ku celceli dhagaystayaasha dhacdada API
- Sida loo habeeyo curiyeyaasha, faham qaababka
Gurguurte (matoorka raadinta)
Qof kastaa waxa uu isticmaalay makiinad wax raadis ah, markaa maxaad adigu u samayn wayday? Gurguurto ayaa loo baahan yahay si loo raadiyo macluumaadka. Qof kastaa wuu isticmaalaa maalin kasta iyo baahida loo qabo tignoolajiyadan iyo khabiirada takhasuska leh ayaa kori doona oo keliya waqti ka dib.
Google search engine
Waxa aad ku baran doonto adiga oo abuuraya matoorka raadintaada:
- Sida gurguurta u shaqeeyaan
- Sida loo tusmeeyo boggaga iyo sida loo kala sareeyo iyadoo la qiimeynayo iyo sumcadda
- Sida loo kaydiyo goobaha la tilmaansaday ee kaydka xogta iyo sida loola shaqeeyo kaydka xogta
Ciyaartoyga muusiga (Spotify, Apple Music)
Qof kastaa wuu dhagaysta muusiga - waa qayb ka mid ah nolosheena. Aan abuurno ciyaaryahan muusik si aan sifiican ugu fahano sida makaanikada aasaasiga ah ee madal muusiga casriga ah u shaqeyso.
Spotify
Waxa aad ku baran doonto adiga oo abuuraya madal muusik kuu gaar ah:
- Sida loola shaqeeyo API-ga ka isticmaal API Spotify ama Apple Music
- Sida loo ciyaaro, u hakiyo ama dib loogu celiyo jidka ku xiga/hore
- Sida loo beddelo mugga
- Sida loo maareeyo marinka isticmaalaha iyo taariikhda browserka
Abka raadinta filimada iyadoo la isticmaalayo React (qabo leh)
Waxa ugu horreeya ee aad ku bilaabi karto waa inaad abuurto app raadinta filimada adoo isticmaalaya React. Hoos waxaa ku yaal sawirka sida codsiga u dambeeya u ekaan doono:
Maxaad baran doontaa
Markaad dhisto abkan, waxaad horumarin doontaa xirfadahaaga falcelinta adiga oo isticmaalaya Hooks API-ga cusub. Mashruucu tusaale ahaan wuxuu adeegsadaa qaybaha React, qabsatooyin badan, API dibadeed, iyo dabcan qaar ka mid ah habaynta CSS.
Xirmada farsamada iyo sifooyinka
- Ku falcelinta qabsatooyinka
- abuur-falcelin-app
- Jsx
- CSS
Adigoon isticmaalin wax xiisado ah, mashaariicdani waxay ku siinayaan meesha ugu fiican ee laga galo falcelinta shaqaynaysa waxayna hubaal ahaan ku caawin doonaan 2020. waad heli kartaa . Raac tilmaamaha ama ka dhig mid adiga kuu gaar ah.
Kala hadal App-ka Vue
Mashruuc kale oo weyn oo adiga ah inaad sameyso waa inaad abuurto app chat adoo isticmaalaya maktabadda JavaScript ee aan jeclahay: VueJS. Codsigu wuxuu u ekaan doonaa sidan:
Maxaad baran doontaa
Casharradan, waxaad ku baran doontaa sida loo sameeyo app-ka Vue ee xoqan - abuurista qaybaha, maaraynta gobolka, samaynta wadooyin, ku xidhidh adeegyada qolo saddexaad, iyo xataa maaraynta aqoonsiga.
Xirmada farsamada iyo sifooyinka
- Vue
- vuex
- Vue Router
- Vue CLI
- Pusher
- CSS
Kani runtii waa mashruuc aad u wanaagsan in lagu bilaabo Vue ama lagu horumariyo xirfadahaaga jira si aad u gasho horumarka 2020. waad heli kartaa .
App cimilo qurxoon oo leh Angular 8
Tusaalahan ayaa kaa caawin doona inaad abuurto app cimilo qurux badan adoo isticmaalaya xagal 8:
Maxaad baran doontaa
Mashruucani wuxuu ku bari doonaa xirfado qiimo leh oo ku saabsan dhisidda codsiyada laga bilaabo eber - laga bilaabo naqshadeynta ilaa horumarinta, dhammaan habka loo diro codsiga diyaarsan.
Xirmada farsamada iyo sifooyinka
- Xaglo-toosiye 8
- Dab-damis
- Samaynta dhinaca server-ka
- CSS oo leh Grid iyo Flexbox
- Mobile saaxiibtinimo iyo la qabsiga
- Habka mugdiga ah
- Interface qurux badan
Waxa aan runtii ka jecelahay mashruucan wax walba leh waa in aadan si gooni ah wax u baran. Taa bedelkeeda, waxaad baraneysaa dhammaan habka horumarinta, laga bilaabo naqshadeynta ilaa ugu dambeyn.
Si aad u sameyso codsiga adoo isticmaalaya Svelte
Svelte waa sida ilmaha cusub ee habka ku salaysan qaybaha - ugu yaraan la mid ah React, Vue iyo Angular. Tanina waa mid ka mid ah alaabada cusub ee ugu kulul 2020.
Barnaamijyada wax-qabadku maaha mawduuca ugu kulul, laakiin waxay runtii kaa caawin doontaa inaad kobciso xirfadahaaga Svelte. Waxay u ekaan doontaa sidan:
Maxaad baran doontaa
Casharkaan ayaa ku tusi doona sida loo sameeyo arji adigoo isticmaalaya Svelte 3, bilow ilaa dhamaad. Waxaad isticmaali doontaa qaybaha, habaynta, iyo maamulayaasha dhacdada
Xirmada farsamada iyo sifooyinka
- Svelte 3
- Qeybaha
- Habaynta CSS
- ES6 syntax
Ma jiraan mashaariic badan oo wanaagsan oo Svelte bilaabay, sidaas darteed waan helay .
E-ganacsiga app isticmaalaya Next.js
Next.js waa qaabka ugu caansan ee lagu dhisayo arjiyada React ee taageera dhinaca server-ka ka bixinta sanduuqa.
Mashruucani wuxuu ku tusi doonaa sida loo sameeyo e-ganacsiga e-commerce oo sidan u eg:
Maxaad baran doontaa
Mashruucan, waxaad ku baran doontaa sida loo horumariyo Next.jsβabuuro bogag iyo qaybo cusub, soo saar xogta, iyo qaabka oo geyso codsi Xiga.
Xirmada farsamada iyo sifooyinka
- Xiga
- Qaybaha iyo bogagga
- Muunad xogta
- Habaynta
- Dejinta Mashruuca
- SSR iyo HBS
Had iyo jeer aad ayay u fiican tahay in la haysto tusaale adduunka dhabta ah sida abka e-commerce si aad wax cusub u barato. Waad awoodaa .
Bloog luuqado badan ku hadasha oo dhamaystiran oo leh Nuxt.js
Nuxt.js waxaa loogu talagalay Vue, waxa Next.js loogu talagalay React: qaab-dhismeedka weyn ee isku dhafka awoodda samaynta dhinaca server-ka iyo codsiyada hal bog ah
Codsiga ugu dambeeya ee aad abuuri karto wuxuu u ekaan doonaa sidan:
Maxaad baran doontaa
Mashruucan muunada ah, waxaad ku baran doontaa sida loo sameeyo degel dhammaystiran iyadoo la isticmaalayo Nuxt.js, laga bilaabo habaynta bilowga ilaa dejinta u dambaysa.
Waxay ka faa'iidaysanaysaa qaar badan oo ka mid ah sifooyinka wanaagsan ee Nuxt ay tahay inay bixiso, sida boggaga iyo qaybaha, iyo habaynta SCSS.
Xirmada farsamada iyo sifooyinka
- Nuxt.js
- Qaybaha iyo bogagga
- Sheeko xannibaad module
- Hagfish
- Vuex ee maamulka gobolka
- SCSS ee habaynta
- Nuxt middlewares
, oo ay ku jiraan waxyaabo badan oo Nuxt.js weyn ah. Anigu shakhsi ahaan waan jeclahay la shaqaynta Nuxt marka waa inaad isku daydaa maadaama ay sidoo kale kaa dhigi doonto horumariye weyn oo Vue ah.
Blog la Gatsby
Gatsby waa koronto-dhaliye heer sare ah oo taagan iyadoo la adeegsanayo React iyo GraphQL. Tani waa natiijada mashruuca:
Maxaad baran doontaa
Casharradan, waxaad ku baran doontaa sida loo isticmaalo Gatsby si aad u samaysato blog aad u isticmaali doonto inaad ku qorto maqaalladaada adigoo isticmaalaya React iyo GraphQL.
Xirmada farsamada iyo sifooyinka
- gatsby
- Diido
- GraphQL
- Plugins iyo mawduucyada
- MDX/Markdown
- Bootstrap CSS
- Tilmaamo
Haddii aad waligaa rabtay inaad bilowdo blog, sida loo sameeyo iyadoo la isticmaalayo React iyo GraphQL.
Ma dhahayo WordPress waa doorasho xun, laakiin Gatsby waxaad ku dhisi kartaa mareegaha waxqabadka sare leh adoo isticmaalaya React - taas oo ah isku-dar la yaab leh.
Blog leh Gridsome
Gridsome for Vue... Hagaag, waxaan horey u haysanay kan Next/Nuxt.
Laakiin isku mid ayaa run u ah Gridsome iyo Gatsby. Labaduba waxay u isticmaalaan GraphQL sida lakabka xogta, laakiin Gridsome waxay isticmaashaa VueJS. Tani sidoo kale waa koronto-dhaliye deg-deg ah oo cajiib ah oo kaa caawin doona inaad abuurto baloogyo waaweyn:
Maxaad baran doontaa
Mashruucani wuxuu ku bari doonaa sida loo sameeyo blog fudud si aad uga bilowdo Gridsome, GraphQL iyo Markdown. Waxa kale oo ay dabooshaa sida loo geeyo codsiga Netlify.
Xirmada farsamada iyo sifooyinka
- Gridsome
- Vue
- GraphQL
- Markdown
- Netlify
Runtii tani maaha casharka ugu dhamaystiran, laakiin waxay dabooshaa fikradaha aasaasiga ah ee Gridsome iyo .
Ciyaartoyga codka ah ee SoundCloud oo isticmaalaya Quasar
Quasar waa qaab kale oo Vue ah oo loo isticmaali karo in lagu abuuro codsiyada moobiilka. Mashruucan waxaad ku abuuri doontaa cod-ciyaartoy cod ah, tusaale ahaan:
Maxaad baran doontaa
Iyadoo mashaariicda kale ay inta badan diiradda saaraan codsiyada webka, kani wuxuu ku tusi doonaa sida loo sameeyo arjiga mobaylka iyadoo la adeegsanayo Vue iyo qaabka Quasar.
Waa inaad hore u haysataa Cordova oo ku shaqaynaysa Android Studio/Xcode habaysan. Haddi aysan ahayn, buuggu waxa uu xidhiidh la leeyahay mareegaha Quasar halkaas oo ay ku tusinayaan sida wax walba loo dejiyo.
Xirmada farsamada iyo sifooyinka
- qusar
- Vue
- Cordova
- WaveSurfer
- Qaybaha UI
, Muujinaya awoodaha Quasar ee abuurista codsiyada mobaylada.
Foomka kaarka deynta
Qaab kaar kredit ah oo qabow oo leh is dhexgalka yar yar ee fudud oo lagu raaxaysto. Waxa ku jira qaabaynta lambarka, xaqiijinta iyo ogaanshaha nooca kaadhka tooska ah. Waxay ku dhisan tahay Vue.js waxayna sidoo kale si buuxda uga jawaabtay. (Waad arki kartaa .)
Waxaad baran doontaa:
- Habraaca oo ansixi foomamka
- Xakamee dhacdooyinka (tusaale ahaan, marka goobuhu isbedelaan)
- Faham sida loo soo bandhigo oo u dhig walxaha bogga, gaar ahaan macluumaadka kaadhka deynta ee ka muuqda foomka dushiisa
Garaafka garaafka
Histogram-ku waa jaantus ama garaaf ka tarjumaya xog gaar ah oo leh baarar leydi ah oo leh dherer ama dherer u dhigma qiyamka ay matalaan.
Waxaa lagu dabaqi karaa si toos ah ama toosan. Shaxda bar toosan waxaa mararka qaarkood loo yaqaannaa jaantuska.
Waxaad baran doontaa:
- U muuji xogta si habaysan oo la fahmi karo
- Intaa waxaa dheer: Baro sida loo isticmaalo curiyaha
canvasiyo sida loo sawiro canaasiirta
waxaad ka heli kartaa xogta dadweynaha adduunka. Waxaa lagu kala soocaa sanadka.
Twitter Wadnaha Animation
Dib ugu noqoshada 2016, Twitter waxay soo bandhigtay animation-kan cajiibka ah ee tweets-keeda. Laga bilaabo 2019, wali waxay u muuqataa qaybta, markaa maxaad adigu u abuurin mid ka mid ah?
Waxaad baran doontaa:
- Ku shaqee sifada CSS
keyframes - Maarayso oo dhaqan geli walxaha HTML
- Isku-dar JavaScript, HTML iyo CSS
Goobaha GitHub ee la raadin karo
Ma jiraan wax qurux badan halkan β Kaydka GitHub waa kaliya liis la ammaanay.
Hadafka waa in la soo bandhigo kaydadka oo loo oggolaado isticmaaluhu inuu shaandheeyo. Isticmaal si aad u hesho kayd isticmaale kasta.
Bogga profile GitHub -
Waxaad baran doontaa:
- Ka hel xogta API
- Muuji xogta API
- Shaandhee oo tus xogta ku habboon raadinta kasta
- Ikhtiyaar: Haddii aad u socoto tartan, isticmaal , la dhisay iyadoo la isticmaalayo GraphQL. .
Sheekada qaabka Reddit
Sheekaysigu waa hab caan ah oo isgaadhsiineed taas oo ay ugu wacan tahay fudaydnimadooda iyo isticmaalkooda. Laakiin maxaa runtii sii hurinaya qolalka lagu sheekeysto ee casriga ah? WebSockets!
Waxaad baran doontaa:
- Adeegso WebSockets, isgaadhsiinta wakhtiga-dhabta ah iyo cusboonaysiinta xogta
- La shaqee heerarka gelitaanka isticmaalaha (tusaale, milkiilaha kanaalka wada sheekaysiga ayaa leh doorka
admin, iyo kuwa kale ee qolka -user) - Habka oo ansixi foomamka - xasuusnoow, daaqadda wada sheekaysiga ee fariinta diritu waa
input - Abuur oo ku biir sheekoyin kala duwan
- La shaqee fariimaha gaarka ah. Isticmaalayaashu waxay si gaar ah ula hadli karaan isticmaalayaasha kale. Asal ahaan, waxaad samayn doontaa isku xirka WebSocket ka dhexeeya laba isticmaale.
Navigation style xariijin
Maxaa ka dhigaya marin-hayntan mid gaar ah waa in weelka boodboodka ahi isu beddelo inuu ku habboon yahay waxa ku jira. Waxaa jira xarrago u ah kala-guurkan marka loo eego hab-dhaqanka soo jireenka ah ee furitaanka iyo xidhitaanka popover cusub.
Waxaad baran doontaa:
- Isku dhafka CSS animations iyo wareejinta
- Nuxurka hoos u dhig oo ku dabaq fasalka firfircoon cunsur sabeeyey
Pacman
Samee noocaaga Pacman Tani waa hab fiican oo lagu helo fikrad ah sida ciyaaraha loo horumariyo oo loo fahmo aasaaska. Isticmaal qaabka JavaScript, React ama Vue.
Waxaad baran doontaa:
- Sida curiyayaasha u dhaqaaqaan
- Sida loo go'aamiyo furayaasha la riixayo
- Sida loo go'aamiyo xilliga isku dhaca
- Waad sii socon kartaa oo waxaad ku dari kartaa kontaroolada dhaqdhaqaaqa rooxaanta
Waxaad ka heli doontaa tusaale mashruucan GitHub
maamulka isticmaalaha
Mashruuca GitHub
Abuuritaanka arjiga nooca CRUD ee maamulka isticmaalaha waxay ku bari doontaa aasaaska horumarka. Tani waxay si gaar ah faa'iido u leedahay horumarinta cusub.
Waxaad baran doontaa:
- Waa maxay habayntu
- Sida loo maareeyo foomamka galitaanka xogta oo loo hubiyo waxa isticmaaluhu galay
- Sida loola shaqeeyo xogta xogta - abuur, akhri, cusboonaysii oo tirtir tallaabooyinka
Hubinta cimilada goobtaada
Mashruuca GitHub
Haddii aad rabto inaad abuurto abka, ku bilow app cimilada. Mashruucan waxaa lagu dhamayn karaa iyadoo la isticmaalayo Swift.
Marka laga soo tago inaad khibrad u leedahay dhisidda arji, waxaad baran doontaa:
- Sida loola shaqeeyo API-ga
- Sida loo isticmaalo geolocation
- Ka dhig codsigaaga mid firfircoon adiga oo ku daraya gelinta qoraalka Dhexdeeda, isticmaalayaashu waxay awood u yeelan doonaan inay galaan goobtooda si ay u eegaan cimilada meel gaar ah.
Waxaad u baahan doontaa API Si aad u hesho xogta cimilada, isticmaal OpenWeather API. Macluumaad dheeraad ah oo ku saabsan OpenWeather API.
Daaqada wada sheekaysiga
Daaqadda sheekaysiga ee aan ku shaqaynayo, waxay ku furan tahay laba tab browser
Abuuritaanka daaqada wada sheekaysiga waa habka ugu fiican ee lagu bilaabi karo saldhigyada. Doorashada xirmooyinka teknoolojiyadda ayaa aad u weyn. Node.js, tusaale ahaan, waa qumman yahay.
Waxaad baran doontaa sida saldhigyadu u shaqeeyaan iyo sida loo hirgeliyo. Tani waa faa'iidada ugu weyn ee mashruucan.
Haddii aad tahay horumariye Laravel oo raba inuu ku shaqeeyo saldhigyada, akhri my
GitLab CI
Haddii aad ku cusub tahay is dhexgalka joogtada ah (CI), la ciyaar GitLab CI. Deji dhowr deegaan oo isku day inaad sameyso dhowr imtixaan. Ma ahan mashruuc aad u adag, laakiin waxaan hubaa inaad wax badan ka baran doonto. Kooxo badan oo horumarineed ayaa hadda isticmaalaya CI. Ogaanshaha sida loo isticmaalo ayaa faa'iido leh.
Waxaad baran doontaa:
- Waa maxay GitLab CI
- Sida loo habeeyo
.gitlab-ci.ymlkaas oo u sheegaya isticmaalaha GitLab waxa la sameeyo - Sida loo geeyo deegaan kale
Falanqeeyaha mareegaha
Samee xoqoxo falanqeeya semantiga mareegaha oo abuuraya qiimayntooda. Tusaale ahaan, waxaad ka eegi kartaa calaamadaha alt tags ee maqan. Ama hubi haddii boggu leeyahay tags meta SEO ah. xoqan waxaa la abuuri karaa iyada oo aan la isticmaalin interface.
Waxaad baran doontaa:
- Sidee buu u shaqeeyaa xoqid?
- Sida loo abuuro doorasha DOM
- Sida loo qoro algorithm
- Haddii aadan rabin inaad halkaas ku joogsato, samee interface interface. Waxaad sidoo kale ka abuuri kartaa warbixin shabakad kasta oo aad hubiso.
Ogaanshaha dareenka shabakadaha bulshada
Ogaanshaha dareenka ee warbaahinta bulshada waa hab fiican oo lagu baro barashada mashiinka.
Waxaad ku bilaabi kartaa adiga oo falanqeynaya hal shabakad bulsho. Qof kastaa wuxuu caadi ahaan ku bilaabmaa Twitter.
Haddii aad khibrad u leedahay barashada mashiinka, isku day inaad xogta ka ururiso shabakadaha bulshada ee kala duwan oo aad isku darto.
Waxaad baran doontaa:
- Waa maxay barashada mashiinka
Trello clone
Waxaad baran doontaa:
- Habaynta codsiyada habaynta wadooyinka (Routing).
- Jiid oo tuur
- Sida loo sameeyo walxo cusub (loox, liis, kaarar).
- Hagaajinta iyo hubinta xogta gelinta
- Laga soo bilaabo dhinaca macmiilka: sida loo isticmaalo kaydinta maxaliga ah, sida loo kaydiyo xogta kaydinta maxaliga ah, sida loo akhriyo xogta kaydinta maxaliga ah.
- Laga soo bilaabo dhinaca serverka: sida loo isticmaalo database-yada, sida loo kaydiyo xogta database, sida loo akhriyo xogta database.
, oo lagu sameeyay React+Redux.
Guddiga maamulka
Codsi fudud oo CRUD ah, oo ku habboon barashada aasaaska. Aan barano:
- Abuur isticmaalayaasha, maamul isticmaalayaasha
- La falgal xogta xogta - abuur, akhri, wax ka beddel, tirtir isticmaalayaasha.
- Xaqiijinta gelinta iyo la shaqaynta foomamka.
Tracker Cryptocurrency (app mobaylka asalka ah)
Wax kasta: Swift, Ujeedo-C, Dhalad falcelin, Java, Kotlin.
Aan barano:
- Sida codsiyada asalka ahi u shaqeeyaan.
- Sida xogta API looga soo ceshado
- Sida qaabaynta bogga hooyo u shaqeeyaan.
- Sida loogu shaqeeyo mobaylada mobaylada.
. Haddii aad hesho wax ka fiican, ku qor faallooyinka.
Haddii aad xiisaynayso, waa kan .
Ka samee xirmada xirmo shabakad kuu gaar ah oo xoq ah
Farsamo ahaan, kani maaha codsi, laakiin waa hawl aad u faa'iido badan in la fahmo sida xirmada webka uga shaqeyso gudaha. Hadda ma noqon doonto "sanduuqa madow", laakiin waa qalab la fahmi karo.
Shuruudaha:
- Isku-dubarid es7 ilaa es5 ( aasaasiga ah).
- U diyaari jsx ilaa js - ama - .vue .js (waa inaad barataa loaders)
- Deji server dev xirmo iyo module kulul dib u dejinta. (vue-cli iyo create-react-app isticmaal labadaba)
- Isticmaal Heroku, now.sh ama Github, baro sida loo geeyo mashaariicda xirmada webka.
- Diyaarso soo-sameeyaha aad jeceshahay si aad u ururiso css - scss, less, stylus.
- Baro sida loo isticmaalo sawirada iyo svgs-ga oo wata xirmada webka.
Hackernews clone
Jedi kasta waxaa looga baahan yahay inuu sameeyo Hackernews u gaar ah.
Waxaad ku baran doontaa inta aad jidka ku jirto:
- Sida loola falgalo hackernews API.
- Sida loo sameeyo hal bog codsi.
- Sida loo hirgeliyo sifooyinka sida daawashada faallooyinka, faallooyinka shakhsi ahaaneed, profiles.
- Habaynta codsiyada habaynta wadooyinka (Routing).
Tudushechka
Dhab ahaantii? Tudushka? Waxaa jira kumanaan iyaga ka mid ah. Laakiin i rumayso, waxaa jirta sabab caannimadan.
App-ka Tudu waa hab fiican oo lagu hubinayo inaad fahantay aasaaska. Isku day inaad hal codsi ku qorto vaniljka Javascript iyo mid qaabka aad ugu jeceshahay.
Baro:
- Abuur hawlo cusub
- Hubi in beeruhu ay buuxsameen.
- Shaandhee hawlaha (dhamaystiran, firfircoon, dhammaan). Isticmaal
filterΠΈreduce. - Faham aasaaska Javascript.
Liiska jiidida iyo hoos u dhigida la kala sooci karo
Aad bay u caawinaysaa in la fahmo .
Aan barano:
- Jiid oo tuur API
- Abuur UI qani ah
Messenger clone (app hooyo)
Waxaad fahmi doontaa sida ay u shaqeeyaan codsiyada webka iyo codsiyada asalka ah, kuwaas oo kaa sooci doona cufka cawl.
Waxaan baran doonaa:
- saldhigyada mareegaha (farriimaha degdega ah)
- Sida codsiyada asalka ahi u shaqeeyaan.
- Sida habraacyadu ugu shaqeeyaan codsiyada asalka ah.
- Abaabulida dariiqyada socodsiinta codsiga ee codsiyada waddaniga ah.
Tafatiraha qoraalka
Ujeedada tifaftiraha qoraalka waa in la yareeyo dadaalka isticmaalayaasha isku dayaya inay u beddelaan qaabeyntooda calaamad HTML sax ah. Tafatiraha qoraalka wanaagsan wuxuu u oggolaanayaa isticmaaleyaasha inay u qaabeeyaan qoraalka siyaabo kala duwan.
Mararka qaarkood, qof kastaa wuxuu isticmaalay tifaftiraha qoraalka. Haddaba maxaa diidaya ?
Reddit clone
waa ururinta wararka bulshada, qiimaynta nuxurka mareegaha iyo goobta doodaha.
Reddit waxay qaadataa inta badan waqtigayga, laakiin waan sii wadaa inaan la joogo. Abuuritaanka Reddit clone waa hab wax ku ool ah oo lagu barto barnaamijka (inta aad isku mar baadhayso Reddit).
Reddit waxay ku siinaysaa qani aad u badan. Ha ka tagin wax sifo ah ama ha u samayn wax si xun. Dunida dhabta ah ee macaamiisha iyo macaamiisha, ma shaqeyn kartid si aan macquul ahayn, ama waxaad si degdeg ah u waayi doontaa shaqadaada.
Macaamiisha caqliga leh waxay isla markiiba ogaan doonaan in shaqada loo qabtay si liidata oo ay heli doonaan qof kale.
Daabacaada xirmo NPM il furan
Haddii aad qorto koodka Javascript, fursada inaad isticmaasho maareeyaha xirmada. Maamulaha xirmada wuxuu kuu ogolaanayaa inaad dib u isticmaasho kood jira oo ay dadka kale qoreen oo daabaceen.
Fahamka wareegga horumarka buuxa ee xirmo ayaa ku siin doona khibrad aad u wanaagsan. Waxaa jira waxyaabo badan oo aad u baahan tahay inaad ogaato markaad kood daabacayso. Waxaad u baahan tahay inaad ka fikirto amniga, nooca semantic, scalability, heshiisyada magacaabista iyo dayactirka.
Baakadu waxay noqon kartaa wax kasta. Haddii aadan fikrad lahayn, samee Lodash adiga kuu gaar ah oo daabac.
Lodash:
Inaad haysato wax aad internetka ku samaysay waxay kaa dhigaysaa 10% ka sarreeya kuwa kale. ku saabsan ilaha furan iyo baakadaha.
Manhajka CodeCamp free
FreeCodecamp wax badan ayuu soo ururiyay .
freeCodeCamp waa urur aan faa'iido doon ahayn. Waxay ka kooban tahay madal wax barasho oo ku salaysan mareegaha is-dhexgalka, golaha bulshada onlaynka ah, qolalka lagu sheekeysto, daabacaado dhexdhexaad ah, iyo ururo maxalli ah kuwaas oo damacsan in ay ka dhigaan horumarinta mareegaha barashada qof kasta.
Waxaad noqon doontaa in ka badan oo aad u qalanto shaqadaada ugu horreysa haddii aad maamusho inaad dhammayso koorsada oo dhan.
Meel eber ka samee server HTTP ah
Hab-maamuuska HTTP waa mid ka mid ah hab-maamuuska ugu muhiimsan ee nuxurku ugu socdaalo internetka. Adeegayaasha HTTP waxaa loo isticmaalaa in loogu adeego waxyaabaha taagan sida HTML, CSS, iyo JS.
Inaad awood u yeelatid inaad ka dhaqangeliso borotokoolka HTTP xoqan waxay ballaarin doontaa aqoontaada sida arrimuhu u falgalaan.
Tusaale ahaan, haddii aad isticmaasho NodeJs, markaa waxaad ogtahay in Express ay bixiso server HTTP ah.
Tixraac ahaan, eeg haddii aad awooddo:
- Samee server adoon isticmaalin wax maktabado ah
- Seerfarku waa inuu u adeegaa HTML, CSS iyo JS content.
- Hirgelinta router meel eber ah
- La soco isbeddelada oo cusboonaysii serverka
Haddii aadan garanayn sababta, isticmaal iskuna day inaad abuurto server HTTP ah meel eber ah.
Appka Desktop ee qoraalada
Dhammaanteen waan qornaa, ma aha?
Aan abuurno app note. Codsigu waxa uu u baahan yahay in uu kaydiyo qoraalada oo uu la mid dhigo kaydka xogta. U samee abka waddaniga ah adigoo isticmaalaya Electron, Swift, ama wax kasta oo aad jeceshahay iyo waxa u shaqeeya nidaamkaaga.
Dareen xornimo inaad tan ku darto caqabadda koowaad (tafatiraha qoraalka).
Gunno ahaan, isku day inaad ku dhejiso nooca desktop-kaaga iyo nooca shabakadda.
Podcasts (clone overcast)
Yaa aan dhegaysan cajaladaha la soo bandhigay?
Samee arji shabakad leh shaqadan soo socota:
- Samee xisaab
- Raadi Podcasts
- Qiimee oo ku biir podcasts
- Joogso oo ciyaar, beddel xawaaraha, hawlaha hore iyo gadaal 30 ilbiriqsi.
Isku day inaad u isticmaasho iTunes API barta bilawga ah. Haddii aad taqaan wax kale oo kheyraad ah, fadlan ku dheji faallooyinka.
Qabashada shaashadda
Hello! Waxaan duubayaa shaashadayda hadda!
Samee desktop-ka ama app-ka webka kaas oo kuu ogolaanaya inaad qabsato shaashaddaada oo aad u kaydiso clip-ka sidii .gif
halkan sida loo gaaro tan.
Ilaha
Source: www.habr.com