1. Têgîna klon
Serlêdana Têgihîştinê ji hêla pir kesan ve tê hezkirin.
Tiştê ku hûn ê bi afirandina klonek Notion fêr bibin:
- . Bikarhêner dikare "bi mişkê bigire" kaşkirin hêman û tê de bi cih bikin droppable dor.
- Meriv çawa daneyan di demek rast de di navbera komputer û smartphone de hevdeng dike.
- Em destûrê didin bikarhêneran ku tomaran biafirînin, bixwînin, nûve bikin û jêbirin, bi vî rengî jêhatîbûnên CRUD perwerde bikin.
Gotar bi piştgiriya Nermalava EDISON, ku tê wergerandin û herweha .
2. Repl.it klon
Repl.it amûrek ji bo sererastkirina koda hevkariyê ya rast-dem e. Hûn dikarin çend zimanan hilbijêrin: JavaScript, Python, Go û kodê rasterast di gerokê de bimeşînin. Ji bo demo û hevpeyivînên kodê yên bilez pir bikêr e.
Tiştê ku hûn ê bi afirandina klonek Repl.it fêr bibin:
- Meriv çawa kodê (aliyê pêşkêşker) di gerokê de (aliyê xerîdar) dimeşîne û bicîh tîne.
- Daneyên têketinê (koda çavkaniyê) bixwînin û encama darvekirinê nîşan bidin.
- Meriv çawa pel û peldankan li ser malperê biafirîne û encaman hilîne.
- Meriv çawa hevoksaziya kodê ronî dike.
3. Google Photos Clone
Google Photos karûbarek ji bo hilanîn û parvekirina wêneyan e.
Her serîlêdana wêneya nûjen dikare fonksiyonên bingehîn pêk bîne: barkirin, berhevkirin, hwd. Mirov dixwazin avatarên xwe biafirînin û wêneyên pisîkan parve bikin, ji ber vê yekê hûn hewce ne ku hûn bi wêneyan re bixebitin.
Tiştê ku hûn ê bi afirandina klonek Google Photos fêr bibin:
- Meriv çawa li ser têlefon, tablet, laptop û tewra ekranên TV-yên mezin jî wêneyên bersivdar biafirîne.
- Meriv çawa barkirina wêneyan, nemaze wêneyên mezin (> 1 MB) û barkirinên girseyî hildibijêre.
- Pelên wêneyê pêvajo bikin, wêneyan ji bo piçûkan an jî dema vekirina galeriyekê hilînin û mezinahî bikin.
- Bonus: meriv çawa wêneyan di nav ewr an databasa herêmî de hilîne.
4. Klona Gifsky
Vîdyoyê bi karanîna fonksiyonan veguherîne GIF ji bo paletên çarçoveyek bikêr û antî-aliasing a demkî. Di encamê de GIFek bi hezaran kulîlk di çarçoveyek de ye.
Tiştê ku hûn ê bi afirandina klonek Gifski fêr bibin:
- Meriv çawa pelên vîdyoyê (.mp4 bo .gif) veguherîne.
- Meriv çawa API-ya HTML-ê bikişîne û bavêje bikar bîne.
- Optimîzasyon û hilberandina wêneyê çawa dixebite.
Têbînî: û li ser GitHub e!
5. Çavdêriya rêjeyên krîptoyê
React Native tracker cryptocurrency
Tiştê ku hûn ê bi afirandina şopînerek rêjeya diravê fêr bibin:
- Meriv çawa bi API-yê re bixebite û daneyan ji dûr ve ji API-yê bistîne.
- Meriv çawa daneyan wekî navnîşek nîşan dide.
- Bonus: Ger bala we dikişîne, min vê dawiyê nivîsand ji bo cryptocurrency bi React Native.
Têbînî: vir .
Hilbijartina projeyên ji weşanên berê.
pel
Layer civakek e ku her kes dikare li ser "board"ek hevpar pixelek bikişîne. Fikra orîjînal li Reddit çêbû. Civaka r/Layer metelokek ji afirîneriya hevpar e, ku her kes dikare bibe afirîner û beşdarî dozek hevpar bibe.
Dema ku hûn projeya xweya Layerê çêbikin hûn ê fêr bibin:
- Canvas JavaScript çawa dixebitîne Zanîna ku meriv kanavek çawa dixebitîne di gelek serlêdanan de jêhatîbûnek krîtîk e.
- Meriv çawa destûrên bikarhêner hevrêz dike. Her bikarhênerek dikare her 15 hûrdem carekê pîxelek bikişîne bêyî ku têkeve.
- Danişînên cookie çêbikin.
Squoosh
Squoosh bi gelek vebijarkên pêşkeftî serîlêdanek berhevkirina wêneyê ye.
GIF 20 MB
Bi afirandina guhertoya xweya Squoosh hûn ê fêr bibin:
- Meriv çawa bi mezinahiyên wêneyê re dixebite
- Bingehên Drag'n'Drop API fêr bibin
- Fêm bikin ka guhdarên API û bûyerê çawa dixebitin
- Meriv çawa pelan barkirin û hinarde dike
Têbînî: Kompresora wêneyê herêmî ye. Ne hewce ye ku daneyên zêde ji serverê re bişînin. Hûn dikarin kompresor li malê hebin, an hûn dikarin wê li ser serverek, bijartina xwe bikar bînin.
Kalker
Haydê? Bi giranî? Hesabker? Erê, tam, hesabkerek. Fêmkirina bingehên operasyonên matematîkê û ka ew çawa bi hev re dixebitin jêhatîbûnek krîtîk e ji bo hêsankirina serîlêdanên we. Zû an dereng hûn ê neçar bimînin ku bi hejmaran re mijûl bibin û zûtir ew çêtir.
Bi afirandina hesabkera xwe hûn ê fêr bibin:
- Bi hejmar û operasyonên matematîkê re bixebitin
- Bi API-ya guhdarên bûyerê re pratîk bikin
- Meriv çawa hêmanan saz dike, şêwazan fam dike
Crawler (Motora Lêgerînê)
Her kesî motorek lêgerînê bikar aniye, ji ber vê yekê çima ya xwe biafirînin? Crawler hewce ne ku ji bo agahdariyê bigerin. Her kes wan her roj bikar tîne û daxwaza vê teknolojiyê û pispor tenê bi demê re dê mezin bibe.
motora lêgerînê ya Google
Tiştê ku hûn ê bi afirandina motora lêgerîna xwe fêr bibin:
- Crawler çawa dixebitin
- Meriv çawa malperan navnîş dike û meriv çawa wan ji hêla nirx û navûdengê ve rêz dike
- Meriv çawa malperên pêvekirî di databasê de hilîne û meriv çawa bi databasê re dixebite
Lîstika muzîkê (Spotify, Apple Music)
Her kes li muzîkê guhdarî dike - ew tenê beşek bingehîn a jiyana me ye. Ka em lîstikvanek muzîkê biafirînin da ku çêtir fam bikin ka mekanîka bingehîn a platformek weşana muzîka nûjen çawa dixebite.
Spotify
Ya ku hûn ê bi afirandina platforma xweya weşana muzîkê fêr bibin:
- Meriv çawa bi API-ê re dixebite. API-ê ji Spotify an Apple Music bikar bînin
- Meriv çawa dileyze, rawestîne an vedigere ser şopa din / berê
- Meriv çawa voluman biguhezîne
- Meriv çawa rêvekirina bikarhêner û dîroka gerokê birêve dibe
Serlêdana lêgerîna fîlimê bi karanîna React (bi çengelan)
Yekem tiştê ku hûn dikarin pê dest pê bikin ev e ku hûn bi karanîna React serîlêdana lêgerîna fîlimê biafirînin. Li jêr wêneyek e ku dê serlêdana paşîn çawa xuya bike:
Hûn ê çi fêr bibin
Bi avakirina vê sepanê, hûn ê bi karanîna Hooks API-ya nisbeten nû ve jêhatîbûnên xwe yên React çêtir bikin. Projeya nimûne hêmanên React, gelek hook, API-yek derveyî, û bê guman hin şêwazên CSS-ê bikar tîne.
Stack û taybetmendiyên teknîkî
- Bi çengan re reaksiyonê bikin
- biafirînin-reaksiyonê-app
- JSX
- CSS
Bêyî karanîna dersan, ev proje xala têketina bêkêmasî ya React-a fonksiyonel didin we û bê guman dê di sala 2020-an de ji we re bibin alîkar. hûn dikarin bibînin . Talîmatan bişopînin an wê ji xwe re bikin.
App Chat bi Vue re
Projeyek din a girîng a ku hûn bikin ev e ku hûn bi karanîna pirtûkxaneya JavaScript-a min a bijare: VueJS serîlêdanek danûstendinê biafirînin. Serlêdan dê tiştek bi vî rengî xuya bike:
Hûn ê çi fêr bibin
Di vê tutoriyê de, hûn ê fêr bibin ka meriv çawa serîlêdanek Vue ji sifrê çêdike - çêkirina pêkhateyan, birêvebirina dewletê, afirandina rêgezan, girêdana bi karûbarên sêyemîn re, û tewra bi erêkirinê re.
Stack û taybetmendiyên teknîkî
- Vue
- vuex
- Vue Router
- Vue CLI
- Pusher
- CSS
Ev projeyek bi rastî pir girîng e ku hûn bi Vue re dest pê bikin an jî jêhatîyên xwe yên heyî baştir bikin da ku di sala 2020-an de bikevin pêşkeftinê. hûn dikarin bibînin .
Serlêdana hewayê ya xweşik bi Angular 8
Ev mînak dê ji we re bibe alîkar ku hûn bi karanîna Angular 8 serîlêdanek hewa xweş biafirînin:
Hûn ê çi fêr bibin
Ev proje dê di avakirina serîlêdanan ji sifirê de jêhatîbûnên hêja fêrî we bike - ji sêwiranê heya pêşkeftinê, heya serîlêdanek amade-amade.
Stack û taybetmendiyên teknîkî
- goşeyî 8
- Firebase
- Rendering aliyê server
- CSS bi Grid û Flexbox
- Mobile dostane û adaptability
- Modeya tarî
- Navbera xweş
Tiştê ku ez bi rastî ji vê projeyek tevhev hez dikim ev e ku hûn tiştan ji hev venaxwînin. Di şûna wê de, hûn tevahiya pêvajoya pêşkeftinê fêr dibin, ji sêwiranê heya bicîhkirina dawîn.
Serlêdana To-Do bi karanîna Svelte
Svelte mîna zarokê nû ye li ser nêzîkatiya bingehîn - bi kêmanî mîna React, Vue û Angular. Û ev yek ji germtirîn hilberên nû yên 2020-an e.
Serlêdanên To-Do ne hewce ne mijara herî germ in, lê ew ê bi rastî ji we re bibe alîkar ku hûn jêhatîbûnên xwe yên Svelte xweş bikin. Ew ê bi vî rengî xuya bike:
Hûn ê çi fêr bibin
Ev tutorial dê nîşanî we bide ka meriv çawa bi karanîna Svelte 3, ji destpêkê heya dawiyê, serîlêdanek biafirîne. Hûn ê hêman, şêwaz, û rêvebirên bûyerê bikar bînin
Stack û taybetmendiyên teknîkî
- Svelte 3
- Components
- Styling bi CSS
- Hevoksaziya ES 6
Pir projeyên destpêkê yên Svelte yên baş tune ne, ji ber vê yekê min dît .
Serlêdana e-bazirganî ya ku Next.js bikar tîne
Next.js çarçoweya herî populer e ji bo avakirina serîlêdanên React-ê ku piştgirîya pêşkêşkera ji qutiyê dike.
Ev proje dê nîşanî we bide ka meriv çawa serîlêdanek e-bazirganiya ku bi vî rengî xuya dike biafirîne:
Hûn ê çi fêr bibin
Di vê projeyê de, hûn ê fêr bibin ka meriv çawa bi Next.js-ê re pêşve diçe — rûpel û hêmanên nû biafirîne, daneyan derxîne, û şêwazê xwe bide û serîlêdanek Next saz bike.
Stack û taybetmendiyên teknîkî
- Paşê.js
- Parçe û Rûpel
- Sampling Data
- Ylêkirin
- Pêşxistina Projeyê
- SSR û SPA
Her gav xweş e ku meriv mînakek cîhana rastîn mîna serîlêdana e-bazirganiyê hebe ku tiştek nû fêr bibe. Hûn dikarin .
Bi Nuxt.js re blogek pirzimanî ya bêkêmasî
Nuxt.js ji bo Vue-yê ye, Next.js ji bo React-ê çi ye: çarçoveyek girîng a ji bo berhevkirina hêza pêşkêşker-side û serîlêdanên yek-rûpelê
Serlêdana dawî ya ku hûn dikarin biafirînin dê bi vî rengî xuya bike:
Hûn ê çi fêr bibin
Di vê projeya nimûneyê de, hûn ê fêr bibin ka meriv çawa bi karanîna Nuxt.js, ji sazkirina destpêkê heya bicîhkirina paşîn, malperek bêkêmasî biafirîne.
Ew ji gelek taybetmendiyên xweş ên ku Nuxt pêşkêşî dike sûd werdigire, wek rûpel û pêkhate, û şêwazkirina bi SCSS.
Stack û taybetmendiyên teknîkî
- Nuxt.js
- Parçe û Rûpel
- Modula Storyblock
- Hagfish
- Vuex ji bo rêveberiya dewletê
- SCSS ji bo şêwazê
- Nuxt navîn
, ku gelek taybetmendiyên Nuxt.js-ê yên mezin dihewîne. Ez bi xwe hez dikim ku bi Nuxt re bixebitim ji ber vê yekê divê hûn wiya biceribînin ji ber ku ew ê we jî bike pêşdebirek Vue ya mezin.
Blog bi Gatsby re
Gatsby hilberînerek malpera statîk a hêja ye ku React û GraphQL bikar tîne. Ev encama projeyê ye:
Hûn ê çi fêr bibin
Di vê tutoriyê de, hûn ê fêr bibin ka meriv çawa Gatsby bikar tîne da ku blogek biafirîne ku hûn ê bikar bînin da ku gotarên xwe bi karanîna React û GraphQL binivîsin.
Stack û taybetmendiyên teknîkî
- gatsby
- Bersivkirin
- GraphQL
- Plugins û mijarên
- MDX / Markdown
- Bootstrap CSS
- Sêwiran
Ger we carî xwest ku hûn blogek dest pê bikin, li ser ka meriv wê çawa bi karanîna React û GraphQL çêbike.
Ez nabêjim WordPress vebijarkek xirab e, lê bi Gatsby re hûn dikarin malperên bi performansa bilind bi karanîna React-ê ava bikin - ku têkiliyek ecêb e.
Blog bi Gridsome
Gridsome ji bo Vue... Baş e, me berê jî ev bi Next/Nuxt re hebû.
Lê heman tişt ji bo Gridsome û Gatsby jî rast e. Her du GraphQL wekî qata daneya xwe bikar tînin, lê Gridsome VueJS bikar tîne. Ev jî çêkerek malpera statîk a ecêb e ku dê ji we re bibe alîkar ku hûn blogên mezin biafirînin:
Hûn ê çi fêr bibin
Ev proje dê fêrî we bike ka meriv çawa blogek hêsan biafirîne da ku bi Gridsome, GraphQL û Markdown dest pê bike. Di heman demê de ew vedigire ka meriv çawa serîlêdanek bi navgîniya Netlify ve tê bicîh kirin.
Stack û taybetmendiyên teknîkî
- Gridsome
- Vue
- GraphQL
- Markdown
- netlify
Ev bê guman ne dersa herî berfireh e, lê ew têgehên bingehîn ên Gridsome û vedihewîne .
Lîstika dengî ya mîna SoundCloud-ê ku Quasar bikar tîne
Quasar çarçoveyek din a Vue ye ku dikare ji bo afirandina sepanên mobîl were bikar anîn. Di vê projeyê de hûn ê serîlêdanek lîstikvanê bihîstwerê biafirînin, mînakî:
Hûn ê çi fêr bibin
Dema ku projeyên din bi giranî li ser sepanên webê hûr dibin, ev yek dê nîşanî we bide ka meriv çawa bi karanîna Vue û çarçoweya Quasar serîlêdanek mobîl biafirîne.
Pêdivî ye ku hûn jixwe Cordova bi Android Studio/Xcode ve hatî mîheng kirin. Heke ne, manual girêdanek bi malpera Quasar re heye ku ew nîşanî we didin ka meriv çawa her tiştî saz dike.
Stack û taybetmendiyên teknîkî
- quasar
- Vue
- Cordova
- WaveSurfer
- Pêkhateyên UI
, kapasîteyên Quasar ji bo çêkirina sepanên mobîl nîşan dide.
Forma qerta krediyê
Şêweyek qerta krediyê ya xweş bi danûstendinên mîkro-heval û xweş. Formatkirina hejmarê, verastkirin û tespîtkirina tîpa qerta otomatîkî vedihewîne. Ew li ser Vue.js hatî çêkirin û di heman demê de bi tevahî bersivdar e. (Hûn dikarin bibînin .)
Tiştê ku hûn ê fêr bibin:
- Formên pêvajoyê bikin û rast bikin
- Bûyeran bi rê ve bibin (mînak, dema ku zevî diguherin)
- Fêm bikin ka meriv çawa hêmanan li ser rûpelê nîşan dide û bi cîh dike, nemaze agahdariya qerta krediyê ya ku li jorê formê xuya dike
grafika bar
Histogram nexşeyek an grafîkek e ku daneyên kategorîk bi barên çargoşe yên bi bilindî an dirêjiyên ku li gorî nirxên ku ew temsîl dikin temsîl dike.
Ew dikarin vertîkal an horîzontal bêne sepandin. Nexşeya barkêşê ya vertical carinan wekî nexşeyek rêzê tê gotin.
Tiştê ku hûn ê fêr bibin:
- Daneyên bi rengek çêkirî û têgihîştî nîşan bidin
- Zêdetir: Fêr bibe ka meriv çawa hêmanê bikar tîne
canvasû çawa hêmanên bi wê xêzkirin
hûn dikarin daneyên nifûsa cîhanê bibînin. Ew li gorî salê têne dabeş kirin.
Twitter Heart Animation
Di sala 2016-an de, Twitter ev anîmasyona ecêb ji bo tweetên xwe destnîşan kir. Ji sala 2019-an de, ew hîn jî beş xuya dike, ji ber vê yekê çima xwe yek biafirînin?
Tiştê ku hûn ê fêr bibin:
- Bi taybetmendiya CSS re bixebitin
keyframes - Hêmanên HTML-ê manîpule bikin û zindî bikin
- JavaScript, HTML û CSS tevlihev bikin
Depoyên GitHub-ê yên ku têne gerîn
Li vir tiştek ecêb tune - repoyên GitHub tenê navnîşek rûmetdar in.
Armanc ew e ku depoyan nîşan bide û destûrê bide bikarhêner ku wan fîlter bike. Bikaranîn ji bo her bikarhênerek depoyan bigirin.
Rûpelê profîla GitHub -
Tiştê ku hûn ê fêr bibin:
- Daneyên ji API-ê bistînin
- Daneyên ji API-ê nîşan bide
- Ji bo her lêgerînê daneyên têkildar Parzîne û nîşan bide
- Vebijarkî: Heke hûn ji bo dijwariyek amade ne, bikar bînin , bi karanîna GraphQL ve hatî çêkirin. .
sohbetên şêwaza Reddit
Chat ji ber sadebûn û karanîna wan rêyek ragihandinê ya populer e. Lê çi bi rastî odeyên chatê yên nûjen dişewitîne? WebSockets!
Tiştê ku hûn ê fêr bibin:
- WebSockets, ragihandina rast-dem û nûvekirina daneyan bikar bînin
- Bi astên gihîştina bikarhêner re bixebitin (mînak, xwediyê kanalek chatê xwedî rol e
admin, û yên din di odeyê de -user) - Formên pêvajoyê bikin û rast bikin - ji bîr mekin, pencereya chatê ya şandina peyamê ye
input - Sohbetên cihêreng biafirînin û tevlî bibin
- Bi peyamên kesane re bixebitin. Bikarhêner dikarin bi bikarhênerên din re bi taybetî biaxivin. Di bingeh de, hûn ê di navbera du bikarhêneran de têkiliyek WebSocket saz bikin.
navîgasyon style Stripe
Ya ku vê navîgasyonê bêhempa dike ev e ku konteynera popover li gorî naverokê diguhere. Di vê veguheztinê de li gorî tevgera kevneşopî ya vebûn û girtina popoverek nû xweşikbûnek heye.
Tiştê ku hûn ê fêr bibin:
- Anîmasyona CSS-ê bi veguherînan re tevlihev bikin
- Naveroka tarî bikin û çîna çalak li ser hêmana pêvekirî bicîh bikin
Pacman
Guhertoya xweya Pacman biafirînin. Ev rêgezek girîng e ku meriv ramanek ka lîstik çawa têne pêşve xistin û bingehîn fam bikin. Çarçoveyek JavaScript, React an Vue bikar bînin.
Hûn ê fêr bibin:
- Çawa hêman diherikin
- Meriv çawa destnîşan dike ku kîjan bişkojkan pêl bike
- Meriv çawa dema pevçûnê diyar dike
- Hûn dikarin bêtir biçin û kontrolên tevgera ghost lê zêde bikin
Hûn ê mînakek vê projeyê bibînin GitHub
rêveberiya bikarhêner
Projeyê GitHub
Afirandina serîlêdanek celebek CRUD ji bo rêveberiya bikarhêner dê bingehên pêşkeftinê fêrî we bike. Ev bi taybetî ji bo pêşdebirên nû bikêr e.
Hûn ê fêr bibin:
- Routing çi ye
- Meriv çawa formên têketina daneyê digire û kontrol dike ka bikarhêner çi têxe
- Meriv çawa bi databasê re dixebite - çalakiyan biafirînin, bixwînin, nûve bikin û jêbirin
Kontrolkirina hewayê li cîhê xwe
Projeyê GitHub
Heke hûn dixwazin sepanan biafirînin, bi sepanek hewayê dest pê bikin. Ev proje dikare bi karanîna Swift were qedandin.
Digel bidestxistina ezmûna avakirina serîlêdanê, hûn ê fêr bibin:
- Meriv çawa bi API-ê re dixebite
- Meriv çawa erdnîgarî bikar tîne
- Bi lê zêdekirina têketina nivîsê serîlêdana xwe dînamîktir bikin. Di wê de, bikarhêner dê karibin têkevin cîhê xwe da ku hewa li cîhek taybetî kontrol bikin.
Hûn ê hewceyê API-ê bibin. Ji bo ku daneyên hewayê bistînin, OpenWeather API bikar bînin. Zêdetir agahdarî di derbarê OpenWeather API de.
Pencereya chatê
Pencereya chatê ya min di çalakiyê de, di du tabloyên gerokê de veke
Afirandina pencereyek danûstendinê rêyek bêkêmasî ye ku meriv bi soketan dest pê bike. Hilbijartina stacka teknolojiyê pir mezin e. Node.js, wek nimûne, bêkêmasî ye.
Hûn ê fêr bibin ka soket çawa dixebitin û meriv çawa wan bicîh tîne. Ev avantaja sereke ya vê projeyê ye.
Ger hûn pêşdebirek Laravel in ku dixwazin bi soketan re bixebitin, min bixwînin
GitLab CI
Heke hûn di entegrasyona domdar (CI) de nû ne, bi GitLab CI-ê re bilîzin. Çend hawîrdoran saz bikin û çend ceribandinan biceribînin. Ew ne projeyek pir dijwar e, lê ez bawer im hûn ê gelek tiştan jê fêr bibin. Gelek tîmên pêşveçûnê niha CI bikar tînin. Dizanin ku meriv wê çawa bikar bîne kêrhatî ye.
Hûn ê fêr bibin:
- GitLab CI çi ye
- Çawa mîheng bikî
.gitlab-ci.ymlku ji bikarhênerê GitLab re dibêje ka çi bike - Meriv çawa li hawîrdorên din belav dike
Analîzatorê malperê
Scraperek çêbikin ku semantîka malperan analîz dike û rêjeya wan diafirîne. Mînakî, hûn dikarin di wêneyan de tagên alt yên wenda kontrol bikin. An jî kontrol bikin ka rûpelê meta tagên SEO hene. Scraper dikare bêyî navberek bikarhênerek were afirandin.
Hûn ê fêr bibin:
- Scraper çawa dixebite?
- Meriv çawa hilbijêrên DOM-ê biafirîne
- Meriv çawa algorîtmayek dinivîse
- Ger hûn nexwazin li wir rawestin, navgînek bikarhênerek çêbikin. Her weha hûn dikarin li ser her malpera ku hûn kontrol dikin raporek çêbikin.
Tespîtkirina hestê li ser torên civakî
Tespîtkirina hestê li ser medyaya civakî rêyek girîng e ku meriv fêrbûna makîneyê were nas kirin.
Hûn dikarin bi analîzkirina tenê yek tora civakî dest pê bikin. Her kes bi gelemperî bi Twitter-ê dest pê dike.
Ger we jixwe ezmûna fêrbûna makîneyê heye, biceribînin ku daneyan ji torên civakî yên cihêreng berhev bikin û wan berhev bikin.
Hûn ê fêr bibin:
- fêrbûna makîneyê çi ye
Klona Trello
Tiştê ku hûn ê fêr bibin:
- Rêxistinkirina rêyên pêvajokirina daxwazê (Routing).
- Kaş bikin û bavêjin.
- Meriv çawa hêmanên nû (tablo, navnîş, kart) diafirîne.
- Pêvajo û kontrolkirina daneyên têketinê.
- Ji hêla xerîdar ve: meriv çawa hilanîna herêmî bikar tîne, meriv çawa daneyê li hilanîna herêmî hilîne, meriv çawa daneyên ji hilana herêmî dixwîne.
- Ji hêla serverê ve: meriv çawa databasan bikar tîne, meriv çawa daneyê di databasê de hilîne, meriv çawa daneyan ji databasê dixwîne.
, di React + Redux de hatî çêkirin.
Panela rêveberê
Serlêdanek CRUD ya hêsan, ji bo fêrbûna bingehîn îdeal e. Ka em fêr bibin:
- Bikarhêneran biafirînin, bikarhêneran birêve bibin.
- Bi databasê re têkilî daynin - bikarhêneran biafirînin, bixwînin, biguherînin, jêbirin.
- Rastkirina têketinê û xebata bi forman.
Şopkera krîpto (sepana xweya mobîl)
Tiştek: Swift, Objective-C, React Native, Java, Kotlin.
Ka em bixwînin:
- Serlêdanên xwemalî çawa dixebitin.
- Meriv çawa daneyên ji API-ê vedigire.
- Pîvana rûpela xwemalî çawa dixebitin.
- Meriv çawa bi simulatorên mobîl re dixebite.
. Ger hûn tiştek çêtir bibînin, di şîroveyan de binivîsin.
Heke hûn eleqedar in, li vir e .
Veavakirina webpackê ya xwe ji nû ve saz bikin
Ji hêla teknîkî ve, ev ne serîlêdanek e, lê ew karekî pir bikêr e ku meriv fam bike ka webpack çawa ji hundur dixebite. Naha ew ê ne "qutiya reş", lê amûrek têgihîştî be.
Hewce:
- Es7 ber es5 (bingehîn) berhev bikin.
- Jsx li js - an - .vue .js berhev bikin (divê hûn barkeran fêr bibin)
- Pêşkêşkara dev webpack û nûvekirina modula germ saz bikin. (vue-cli û create-react-app herduyan bikar tînin)
- Heroku, now.sh an Github bikar bînin, fêr bibin ka meriv çawa projeyên webpackê bicîh dike.
- Pêşprocessorê xweya bijare saz bikin ku css berhev bike - scss, kêmtir, stîlus.
- Fêr bibe ka meriv çawa wêne û svgs bi webpackê re bikar tîne.
klona Hackernews
Her Jedi pêdivî ye ku Hackernews-a xwe çêbike.
Tiştê ku hûn ê di rê de fêr bibin:
- Meriv çawa bi hackernews API-ê re têkilî daynin.
- Meriv çawa serîlêdanek rûpelek yekane biafirîne.
- Meriv çawa taybetmendiyên wekî dîtina şîroveyan, şîroveyên kesane, profîlan bicîh tîne.
- Rêxistinkirina rêyên pêvajokirina daxwazê (Routing).
Tudushechka
Bi giranî? Tudushka? Bi hezaran ji wan hene. Lê ji min bawer bikin, sedemek vê populerbûnê heye.
Serlêdana Tudu rêgezek girîng e ku hûn pê ewle bibin ku hûn bingehîn fam dikin. Biceribînin yek serîlêdanê di vanilla Javascript de û yek jî di çarçoveya xweya bijare de binivîsin.
Fêrbûn:
- Karên nû çêbikin.
- Kontrol bikin ka qad hatine dagirtin.
- Karên Parzûnê (qediyayî, çalak, hemî). Bikaranîn
filterиreduce. - Bingehên Javascript fêm bikin.
Lîsteya kaşkirin û daxistinê ya cûrbecûr
Ji bo fêmkirinê pir alîkar e .
Ka em fêr bibin:
- API-ê kaş bikin û bavêjin
- UI-yên dewlemend biafirînin
Kloneya Messenger (serlêdana xwecî)
Hûn ê fêm bikin ka hem serîlêdanên malperê û hem jî serîlêdanên xwemalî çawa dixebitin, ku dê we ji girseya gewr veqetîne.
Ya ku em ê bixwînin:
- Soketên Webê (peyamên tavilê)
- Serlêdanên xwemalî çawa dixebitin.
- Di serîlêdanên xwemalî de şablon çawa dixebitin.
- Di serîlêdanên xwemalî de rêyên hilanîna daxwazê organîze dikin.
Edîtorê nivîsê
Armanca edîtorek nivîsê kêmkirina hewildana bikarhêneran e ku hewl didin ku formata xwe veguherînin nîşankirina derbasdar a HTML. Edîtorek nivîsê ya baş rê dide bikarhêneran ku nivîsê bi awayên cihêreng format bikin.
Di demekê de, her kesî edîtorek nivîsê bikar aniye. Îcar çima na ?
Reddit klon
kombûna nûçeyên civakî, nirxandina naveroka malperê û malpera nîqaşê ye.
Reddit piraniya dema min digire, lê ez berdewam dikim ku li ser wê bisekinim. Afirandina klonek Reddit rêyek bi bandor e ku meriv bernamekirinê fêr bibe (dema ku di heman demê de li Reddit digere).
Reddit ji we re pir dewlemend peyda dike. Tu taybetmendiyan nehêlin an tiştan bi rengekî bêkêmasî nekin. Di cîhana rastîn de bi xerîdar û xerîdar re, hûn nekarin bi rengekî bêkêmasî bixebitin, an jî hûn ê zû karê xwe winda bikin.
Xerîdarên jîr dê tavilê fêhm bikin ku kar xirab tê kirin û dê kesek din bibînin.
Weşandina pakêtek NPM ya çavkaniya vekirî
Ger hûn kodê di Javascript de binivîsin, şans in ku hûn rêveberek pakêtê bikar bînin. Rêvebirek pakêtê dihêle hûn koda heyî ya ku kesên din nivîsandin û weşandine ji nû ve bikar bînin.
Fêmkirina çerxa pêşkeftina tevahî ya pakêtek dê ezmûnek pir baş peyda bike. Gelek tişt hene ku hûn hewce ne ku gava kodê weşan bikin. Pêdivî ye ku hûn li ser ewlehî, guhertoya semantîk, mezinbûn, peymanên nav û lênihêrînê bifikirin.
Pakêt dikare her tişt be. Ger ramanek we tune, Lodashê xwe biafirînin û biweşînin.
Lodash:
Hebûna tiştek ku we li serhêl kiriye we 10% li ser yên din dihêle. li ser çavkaniyên vekirî û pakêtan.
belaşCodeCamp Curriculum
freeCodecamp gelek tişt berhev kiriye .
freeCodeCamp rêxistinek ne-qezenc e. Ew ji platformek fêrbûna-based webê ya înteraktîf, forumek civata serhêl, odeyên chatê, weşanên navîn, û rêxistinên herêmî yên ku dixwazin fêrbûna pêşkeftina malperê ji her kesî re bigihînin pêk tê.
Ger hûn tevayî qursê biqedînin hûn ê ji bo karê xweya yekem jêhatîtir bin.
Ji nû ve serverek HTTP biafirînin
Protokola HTTP yek ji protokolên sereke ye ku naverok li ser Înternetê bi rê ve diçe. Pêşkêşkerên HTTP têne bikar anîn ku ji naveroka statîk ên wekî HTML, CSS, û JS re xizmetê bikin.
Ku hûn bikaribin protokola HTTP-ê ji nû ve bicîh bikin dê zanîna we ya li ser ka tiştan çawa bi hevûdu re têkildar bikin berfireh bike.
Mînakî, heke hûn NodeJs bikar bînin, wê hingê hûn dizanin ku Express serverek HTTP peyda dike.
Ji bo referansê, bibînin ka hûn dikarin:
- Serverek bêyî karanîna pirtûkxaneyan saz bikin
- Pêdivî ye ku server naveroka HTML, CSS û JS xizmetê bike.
- Pêkanîna router ji sifirê
- Guhertinan bişopînin û serverê nûve bikin
Heke hûn nizanin çima, bikar bînin û hewl bidin ku serverek HTTP biafirînin ji serî de.
Serlêdana sermaseyê ji bo notan
Em hemî notan digirin, ne wusa?
Ka em serîlêdanek noteyan biafirînin. Pêdivî ye ku serîlêdan notan hilîne û wan bi databasê re hevdeng bike. Bi karanîna Electron, Swift, an ya ku hûn jê hez dikin û ya ku ji bo pergala we dixebite, serîlêdanek xwemalî ava bikin.
Hûn dikarin vê yekê bi pêşbaziya yekem (edîtorê nivîsê) re hev bikin.
Wekî bonus, biceribînin ku guhertoya sermaseya xwe bi guhertoya malperê re hevdeng bikin.
Podcast (Kloneya sergirtî)
Kî guh nade podcastan?
Bi fonksiyonên jêrîn serîlêdanek malperê biafirînin:
- Hesabek çêbikin
- Li Podcastan Bigerin
- Binirxînin û bibin abone li podcastan
- Rawestînin û bilîzin, leza xwe biguhezînin, fonksiyonên pêş û paş ve ji bo 30 çirkeyan.
Biceribînin iTunes API-ê wekî xala destpêkê bikar bînin. Heke hûn çavkaniyên din dizanin, ji kerema xwe di şîroveyan de bişînin.
Girtina Screen
Slav! Ez niha dîmenê ekrana xwe dikişînim!
Sermaseyek an serîlêdana malperê biafirînin ku destûrê dide te ku hûn dîmendera xwe bigirin û klîbê wekî tomar bikin .gif
vir çawa ji bo bidestxistina vê.
Çavkaniyên
Source: www.habr.com