I-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)

1. Ikloni yengcinga

Usetyenziso lweNgcaciso luyathandwa ngabaninzi; likuvumela ukuba wenze umsebenzi wakho usebenze kakuhle, usebenze ngamaxwebhu, imisebenzi yeshedyuli, kunye nokuvumelanisa idatha phakathi kwezixhobo.

I-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)

www.notion.so

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.

I-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)

Eli nqaku liguqulelwe ngenkxaso ye-EDISON Software, leyo iphuhlisa usetyenziso kunye neewebhusayithi, kwakunye utyala 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.

I-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)

repl.it

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.

I-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)

www.google.com/photos/about

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

IGifski iguqula ividiyo ibe yiGIF usebenzisa imisebenzii-pngquant kwipalethi ezisebenzayo ezinqamlezileyo kunye ne-anti-aliasing yexeshana. Isiphumo siyi-GIF enamawaka eentyatyambo kwisakhelo ngasinye.

I-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)

gif.ski

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: I-Gifsky yiprojekthi yomthombo ovulekileyo kwaye ikwiGitHub!

5. Ukubeka iliso amazinga e-cryptocurrency

I-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)

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 GitHub umzekelo wogcino.

Ukhetho lweeprojekthi kupapasho lwangaphambili.

Ulwaleko

I-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)

www.reddit.com/r/layer

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-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)
squooosh.app

I-Squoosh sisicelo sokucinezela umfanekiso kunye neenketho ezininzi eziphambili.

GIF 20 MBI-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)

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.

I-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)
jarodburchhill.github.io/CalculatorReactApp

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.

I-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)
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.

I-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)
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:

I-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)

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 Umzekelo weprojekthi apha. Landela imiyalelo okanye uzenzele eyakho.

Ncokola App kunye Vue

Enye iprojekthi enkulu onokuyenza kukwenza usetyenziso lwencoko usebenzisa ilayibrari yam endiyithandayo yeJavaScript: VueJS. Isicelo siya kujongeka ngolu hlobo:

I-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)

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 isifundo apha.

Imozulu entle ene-Angular 8

Lo mzekelo uya kukunceda wenze imozulu entle usebenzisa iAngular 8:

I-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)

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:

I-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)

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 olu lukhetho olulungileyo ukuqala ngalo.

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:

I-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)

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 fumana isifundo apha.

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:

I-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)

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

Le yiprojekthi epholileyo ngokwenene, equka izinto ezininzi ezintle ze-Nuxt.js. Mna ngokobuqu ndiyakuthanda ukusebenza neNuxt ke kufuneka uzame njengoko iya kukwenza ube ngumphuhlisi omkhulu weVue.

Ibhlog kunye neGatsby

I-Gatsby yeyona ndawo igqwesileyo yejenereyitha yesiza esebenzisa iReact kunye neGraphQL. Esi sisiphumo seprojekthi:

I-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)

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, lo ngumzekelo omkhulu ngendlela yokwenza usebenzisa iReact kunye neGraphQL.

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:

I-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)

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-Markdown inokuba sisiqalo esihle.

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:

I-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)

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

Iprojekthi encinci, ebonisa amandla e-Quasar ekudaleni izicelo zeselula.

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 apha.)

I-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)

Ikhadi letyala-ifomu

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.

I-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)

Uya kufunda ntoni:

  • Bonisa idatha ngendlela eyakhiweyo neqondakalayo
  • Ukongeza: Funda indlela yokusebenzisa isiqalelo canvas kunye nendlela yokuzoba izinto ngayo

kuyinto ungafumana idatha yabemi behlabathi. Zihlelwa ngokonyaka.

Twitter Heart oopopayi

Emuva kwi-2016, i-Twitter yazisa le mifanekiso emangalisayo yeetweets zayo. Ukusukela ngo-2019, isajongeka njengenxalenye, kutheni ungazenzi ngokwakho?

I-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)
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 esemthethweni GitHub API ukufumana iindawo zokugcina zomsebenzisi ngamnye.

I-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)

Iphepha leprofayile yeGitHub - github.com/indreklasn

Uya kufunda ntoni:

Iincoko zesimbo seReddit

Iincoko ziyindlela edumileyo yonxibelelwano ngenxa yokulula kunye nokusebenziseka ngokulula. Kodwa yintoni ephembelela amagumbi okuncokola anamhlanje? WebSockets!

I-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)

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.

I-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)

Uya kufunda ntoni:

  • Dibanisa oopopayi beCSS kunye neenguqu
  • Dim umxholo kwaye usebenzise iklasi esebenzayo kwinto edadayo

Pacman

I-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)

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 kwindawo yokugcina GitHub

ulawulo lomsebenzisi

I-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)

Le projekthi kwindawo yokugcina GitHub

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

I-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)
Le projekthi kwindawo yokugcina GitHub

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 apha.

Ifestile yokuncokola

I-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)
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 inqaku

IGitLab CI

I-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)

Umthombo

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.ymlexelela umsebenzisi weGitLab ukuba makenze ntoni
  • Ukusasazwa njani kwezinye iindawo

Umhlalutyi wewebhusayithi

I-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)

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

I-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)

Umthombo

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

I-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)

Trello clone evela Indrek Lasn.

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.

Nanku umzekelo wendawo yokugcina, yenziwe kwiReact+Redux.

Iphaneli yomlawuli

I-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)
Github Repository.

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)

I-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)
Indawo yokugcina yeGithub.

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.

Zama le API. Ukuba ufumana into engcono, bhala kwizimvo.

Ukuba unomdla, nantsi nasi isifundo.

Cwangcisa eyakho i-webpack config ukususela ekuqaleni

I-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)
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.

Esi sisixhobo esimangalisayo sabaqalayo abagqibeleleyo.

Hackernews clone

I-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)
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

I-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)
TodoMVC.

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

I-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)
Indawo yokugcina yeGithub.

Kuluncedo kakhulu ukuqonda tsala kwaye ulahle api.

Masifunde:

  • Tsala kwaye ulahle i-API
  • Yenza ii-UIs ezityebileyo

Isixhobo somthunywa (usetyenziso lwemveli)

I-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)
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

I-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)

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 yidale ngokwakho?

Reddit clone

I-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)

Reddit ludibaniso lweendaba zentlalo, ukukala komxholo wewebhu kunye nendawo yengxoxo.

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 API. Sukushiya naziphi na iimpawu okanye wenze izinto ngamabona-ndenzile. Ehlabathini lokwenyani kunye nabathengi kunye nabathengi, awukwazi ukusebenza ngokungaqhelekanga, okanye uya kuphulukana nomsebenzi wakho ngokukhawuleza.

Abathengi abahlakaniphile baya kuqonda ngokukhawuleza ukuba umsebenzi wenziwa kakubi kwaye uya kufumana omnye umntu.

I-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)

Reddit API

Ukupapasha iphakheji ye-NPM yomthombo ovulekileyo

I-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)

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.

I-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)

Lodash: lodash.com

Ukuba nento oyenzileyo kwi-intanethi kukubeka i-10% ngaphezu kwabanye. Nazi ezinye izixhobo eziluncedo malunga nemithombo evulekileyo kunye neepakethe.

IKharityhulam yeCodeCamp yasimahla

I-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)

Ikharityhulamu yeFCC

I-freeCodecamp iqokelele kakhulu ikhosi yenkqubo ebanzi.

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.

I-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)

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 Hamba phantsi kwaye uzame ukwenza iseva yeHTTP Caddy ukususela ekuqalei.

I-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)

Usetyenziso lweDesktop lwamanqaku

I-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)

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)

I-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)

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.

I-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)

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

Ukuthathwa kwesikrini

I-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)

Mholo! Ndicofa iscreen sam ngoku!

Yenza i-desktop okanye i-app yewebhu ekuvumela ukuba ubambe isikrini sakho kwaye ugcine ikliphu njenge .gif

Apha ezinye iingcebisoindlela yokuphumeza oku.

Imithombo

umthombo: www.habr.com

Yongeza izimvo