1. Nozioa klona
Notion aplikazioa asko maite dute; zure lan-fluxua optimizatzeko, dokumentuekin lan egiteko, zereginak programatzeko eta gailuen arteko datuak sinkronizatzeko aukera ematen dizu.
Notion klon bat sortuz ikasiko duzuna:
- . Erabiltzaileak "saguarekin hartu" dezake arrastakagarria elementua eta jarri jaregiteko modukoa zona.
- Nola sinkronizatu datuak denbora errealean zure ordenagailuaren eta telefonoaren artean.
- Erabiltzaileei erregistroak sortzeko, irakurtzeko, eguneratzeko eta ezabatzeko aukera ematen diegu, horrela CRUD trebetasunak trebatzeko.
Artikulua EDISON Software-ren laguntzarekin itzuli da Eta .
2. Repl.it klona
Repl.it denbora errealean lankidetza-kodea editatzeko tresna da. Hainbat hizkuntza aukeratu ditzakezu: JavaScript, Python, Go eta exekutatu kodea zuzenean arakatzailean. Oso erabilgarria demo azkar eta kode elkarrizketak egiteko.
Repl.it klon bat sortuz ikasiko duzuna:
- Nola exekutatu eta exekutatu kodea (zerbitzariaren aldetik) arakatzailean (bezeroaren aldetik).
- Irakurri sarrerako datuak (iturburu kodea) eta bistaratu exekuzioaren emaitza.
- Nola sortu fitxategiak eta karpetak sarean eta emaitzak gorde.
- Nola nabarmendu kodearen sintaxia.
3. Google Argazkiak Klonatzea
Google Photos argazkiak gordetzeko eta partekatzeko zerbitzua da.
Edozein argazki-aplikazio modernoak oinarrizko funtzioak bete ditzake: igo, moztu, etab. Jendeak bere avatarrak sortu eta katuen argazkiak partekatu nahi ditu, beraz, irudiekin lan egin ahal izan behar duzu.
Google Argazkiak klon bat sortuz ikasiko duzuna:
- Nola sortu erantzunak diren irudiak telefonoetan, tabletetan, ordenagailu eramangarrietan eta baita telebistako pantaila erraldoietan ere.
- Irudien kargak nola kudeatu, batez ere irudi handiak (>1 MB) eta kargatze masiboak.
- Prozesatu irudi-fitxategiak, moztu eta aldatu argazkiak koadro txikietarako edo galeria bat irekitzean.
- bonus: nola gorde irudiak hodeian edo tokiko datu-basean.
4. Gifsky klona
bideoak GIF bihurtzen ditu funtzioak erabiliz cross-frame paleta eraginkorrak eta denborazko antialiasing lortzeko. Emaitza GIF bat da, fotograma bakoitzeko milaka lore dituena.
Gifski klon bat sortuz ikasiko duzuna:
- Nola bihurtu bideo-fitxategiak (.mp4 .gif-era).
- Nola erabili Arrastatu eta Jaregin HTML APIa.
- Irudien optimizazioa eta prozesamendua nola funtzionatzen duten.
Oharra: eta GitHub-en dago!
5. Kriptomoneta tasak kontrolatzea
Erreakzionatu Native kriptografia-moneta jarraitzailea
Moneta-tasaren jarraitzaile bat sortuz ikasiko duzuna:
- Nola lan egin APIarekin eta datuak urrunetik jaso APItik.
- Nola bistaratu datuak zerrenda gisa.
- bonus: Interesatzen bazaizu, duela gutxi idatzi dut Kriptomoneta React Native-rekin.
Oharra: Hemen .
Aurreko argitalpenetako proiektuen aukeraketa.
Layer
Geruza komunitate bat da, non guztiek pixel bat marraztu dezaketen "arbel" partekatu batean. Jatorrizko ideia Reddit-en jaio zen. r/Layer komunitatea partekatutako sormenaren metafora da, mundu guztiak sortzaile izan daitezkeela eta kausa komun batean lagundu.
Geruza propioa proiektua sortzean ikasiko duzuna:
- Nola funtzionatzen duen JavaScript mihisea Mihise bat funtzionatzen jakitea trebetasun kritikoa da aplikazio askotan.
- Nola koordinatu erabiltzailearen baimenak. Erabiltzaile bakoitzak pixel bat marraz dezake 15 minuturo, saioa hasi beharrik gabe.
- Sortu cookie saioak.
Squoosh
Squoosh irudiak konprimitzeko aplikazio bat da, aukera aurreratu asko dituena.
GIF 20 MB
Squoosh-en zure bertsioa sortuz ikasiko duzu:
- Irudien tamainarekin nola lan egin
- Ikasi Drag'n'Drop APIaren oinarriak
- Ulertu nola funtzionatzen duten APIak eta gertaeren entzuleek
- Nola igo eta esportatu fitxategiak
Oharra: Irudi-konpresorea lokala da. Ez da beharrezkoa zerbitzariari datu gehigarriak bidaltzea. Konpresorea etxean izan dezakezu, edo zerbitzari batean erabil dezakezu, zuk nahi duzun.
kalkulagailu
Etorri? Serio? Kalkulagailua? Bai, zehazki, kalkulagailua. Matematikako eragiketen oinarriak eta elkarrekin nola funtzionatzen duten ulertzea trebetasun kritikoa da zure aplikazioak sinplifikatzeko. Lehenago edo beranduago zenbakiei aurre egin beharko diezu eta zenbat eta lehenago hobe.
Zure kalkulagailua sortuz ikasiko duzu:
- Zenbakiak eta eragiketa matematikoak lantzea
- Praktikatu gertaera entzuleen APIarekin
- Elementuak nola antolatu, estiloak ulertu
Arakatzailea (bilatzailea)
Denek erabili dute bilatzaile bat, beraz, zergatik ez sortu zurea? Informazioa bilatzeko arakatzaileak behar dira. Denek egunero erabiltzen dituzte eta teknologia eta espezialisten eskaera denborarekin haziko da.
Google bilatzailea
Zure bilatzailea sortuz ikasiko duzuna:
- Nola funtzionatzen duten arakatzaileak
- Nola indexatu guneak eta nola sailkatu balorazio eta ospearen arabera
- Nola gorde indexatutako guneak datu-base batean eta nola lan egin datu-basearekin
Musika erreproduzitzailea (Spotify, Apple Music)
Denek entzuten dute musika, gure bizitzaren zati bat besterik ez da. Sortu dezagun musika erreproduzitzaile bat musika erreproduzitzeko plataforma moderno baten oinarrizko mekanikak nola funtzionatzen duten hobeto ulertzeko.
Spotify
Zure musika erreproduzitzeko plataforma propioa sortuz ikasiko duzuna:
- Nola lan egin APIarekin. erabili Spotify edo Apple Music-en APIa
- Nola erreproduzitu, pausatu edo atzera egin hurrengo/aurreko pistara
- Bolumena nola aldatu
- Nola kudeatu erabiltzaileen bideratzea eta arakatzailearen historia
Filmak bilatzeko aplikazioa React erabiliz (kakoekin)
Hasteko lehenengo gauza React erabiliz filmak bilatzeko aplikazio bat sortzea da. Jarraian, azken aplikazioa nolakoa izango den irudi bat duzu:
Zer ikasiko duzu
Aplikazio hau eraikiz, zure React trebetasunak hobetuko dituzu Hooks API berri samarra erabiliz. Adibide proiektuak React osagaiak, kako asko, kanpoko API bat eta, noski, CSS estilo batzuk erabiltzen ditu.
Teknologia pila eta ezaugarriak
- Erreakzionatu kakoekin
- sor-erreakzionatzen-aplikazioa
- JSX
- CSS
Inongo klaserik erabili gabe, proiektu hauek React funtzionalerako sarrera-puntu ezin hobea ematen dizute eta 2020an lagunduko dizute zalantzarik gabe. aurki dezakezu . Jarraitu argibideak edo egin ezazu zeure burua.
Txateatu aplikazioa Vue-rekin
Egin behar duzun beste proiektu handi bat txat-aplikazio bat sortzea da nire JavaScript liburutegi gogokoena erabiliz: VueJS. Aplikazioak honelako itxura izango du:
Zer ikasiko duzu
Tutorial honetan, Vue aplikazioa hutsetik nola egiten ikasiko duzu: osagaiak sortzen, egoera maneiatzen, ibilbideak sortzen, hirugarrenen zerbitzuetara konektatzen eta autentifikazioa ere maneiatzen.
Teknologia pila eta ezaugarriak
- ikuspegi
- vuex
- Vue Router
- Ikusi CLI
- Pusher
- CSS
Proiektu bikaina da Vue-rekin hasteko edo zure trebetasunak hobetzeko 2020an garapenean sartzeko. aurki dezakezu .
Eguraldi aplikazio ederra Angular 8-rekin
Adibide honek eguraldi aplikazio eder bat sortzen lagunduko dizu Angular 8 erabiliz:
Zer ikasiko duzu
Proiektu honek aplikazioak hutsetik eraikitzeko trebetasun baliotsuak irakatsiko dizkizu: diseinutik garapenera arte, inplementatzeko prest dagoen aplikazioraino.
Teknologia pila eta ezaugarriak
- 8. angelua
- Firebase
- Zerbitzariaren aldean errendatzea
- CSS Grid eta Flexbox-ekin
- Mugikorretarako errespetua eta moldagarritasuna
- Modu iluna
- Interfaze ederra
Oso gogoko dudana proiektu guzti-guzti honetan ez duzula gauzak isolatuta ikasten da. Horren ordez, garapen prozesu osoa ikasten duzu, diseinutik azken inplementazioraino.
To-Do aplikazioa Svelte erabiliz
Svelte osagaietan oinarritutako ikuspegian ume berria bezalakoa da - React, Vue eta Angular-en antzekoa, gutxienez. Eta hau 2020rako produktu berrienetako bat da.
Egin beharreko aplikazioak ez dira zertan gairik beroena, baina benetan lagunduko dizu zure Svelte gaitasunak hobetzen. Honela izango da:
Zer ikasiko duzu
Tutorial honek Svelte 3 erabiliz aplikazio bat nola sortu erakutsiko dizu, hasieratik amaierara. Osagaiak, estiloa eta gertaeren kudeatzaileak erabiliko dituzu
Teknologia pila eta ezaugarriak
- Svelte 3
- Osagaiak
- Estiloa CSS-rekin
- ES 6 sintaxia
Ez dago Svelte hasierako proiektu on asko, beraz, aurkitu dut .
Merkataritza elektronikoko aplikazioa Next.js erabiliz
Next.js zerbitzariaren aldetik errendatzea onartzen duten React aplikazioak eraikitzeko esparru ezagunena da.
Proiektu honek honelako itxura duen merkataritza elektronikoko aplikazio bat nola sortu erakutsiko dizu:
Zer ikasiko duzu
Proiektu honetan, Next.js-ekin nola garatzen ikasiko duzu: orri eta osagai berriak sortu, datuak atera eta Next aplikazio bat estiloa eta inplementatu.
Teknologia pila eta ezaugarriak
- Hurrengoa.js
- Osagaiak eta Orrialdeak
- Datuen laginketa
- stylization
- Proiektuaren hedapena
- SSR eta SPA
Beti ona da mundu errealeko adibide bat izatea merkataritza elektronikoko aplikazio bat bezalakoa zerbait berria ikasteko. Ahal duzu .
Blog eleanitza osoa Nuxt.js-ekin
Nuxt.js Vue-rentzat da, Next.js zer den React-entzat: zerbitzariaren alboko errendatzearen boterea eta orrialde bakarreko aplikazioak konbinatzeko esparru bikaina.
Sor dezakezun azken aplikazioa itxura hau izango du:
Zer ikasiko duzu
Lagin proiektu honetan, Nuxt.js erabiliz webgune osoa nola sortu ikasiko duzu, hasierako konfiguraziotik azken inplementaziora arte.
Nuxtek eskaintzen dituen funtzio eder asko aprobetxatzen ditu, hala nola orriak eta osagaiak, eta SCSS-ekin estiloa.
Teknologia pila eta ezaugarriak
- Nuxt.js
- Osagaiak eta Orrialdeak
- Storyblock modulua
- Arraina
- Estatuko kudeaketarako Vuex
- Estilorako SCSS
- Nuxt middlewareak
, Nuxt.js ezaugarri bikain asko biltzen dituena. Pertsonalki maite dut Nuxt-ekin lan egitea, beraz, probatu beharko zenuke Vue garatzaile bikaina bihurtuko zaitu eta.
Gatsbyrekin bloga
Gatsby gune estatikoko sorgailu bikaina da React eta GraphQL erabiliz. Hau da proiektuaren emaitza:
Zer ikasiko duzu
Tutorial honetan, Gatsby nola erabiltzen ikasiko duzu React eta GraphQL erabiliz zure artikuluak idazteko erabiliko duzun blog bat sortzeko.
Teknologia pila eta ezaugarriak
- gatsby
- Erreakzionatzeko
- GraphQL
- Pluginak eta gaiak
- MDX/Markdown
- Bootstrap CSS
- txantiloiak
Inoiz blog bat sortu nahi izan baduzu, React eta GraphQL erabiliz nola egin.
Ez dut esaten WordPress aukera txarra denik, baina Gatsbyrekin errendimendu handiko webguneak eraiki ditzakezu React erabiliz, konbinazio harrigarria da.
Bloga Gridsomerekin
Gridsome Vue-rako... Ados, hau jada bagenuen Next/Nuxt-ekin.
Baina gauza bera gertatzen da Gridsome eta Gatsbyrekin. Biek GraphQL erabiltzen dute datu-geruza gisa, baina Gridsomek VueJS erabiltzen du. Hau ere blog bikainak sortzen lagunduko dizun gune-sorgailu estatiko harrigarria da:
Zer ikasiko duzu
Proiektu honek blog sinple bat nola sortzen irakatsiko dizu Gridsome, GraphQL eta Markdown-ekin hasteko. Netlify-ren bidez aplikazio bat nola zabaldu ere azaltzen du.
Teknologia pila eta ezaugarriak
- Gridsome
- ikuspegi
- GraphQL
- Markdown
- Netlify
Hau ez da, zalantzarik gabe, tutorial zabalena, baina Gridsome eta oinarrizko kontzeptuak biltzen ditu .
SoundCloud antzeko audio erreproduzitzailea Quasar erabiliz
Quasar mugikorretarako aplikazioak sortzeko erabil daitekeen Vue marko bat da. Proiektu honetan audio erreproduzitzailearen aplikazio bat sortuko duzu, adibidez:
Zer ikasiko duzu
Beste proiektu batzuek batez ere web aplikazioetan oinarritzen diren bitartean, honek Vue eta Quasar markoa erabiliz mugikorretarako aplikazio bat nola sortu erakutsiko dizu.
Dagoeneko Cordova izan beharko zenuke exekutatzen Android Studio/Xcode konfiguratuta. Hala ez bada, eskuliburuak Quasar webgunerako esteka du eta bertan dena nola konfiguratu erakusten dizute.
Teknologia pila eta ezaugarriak
- quasar
- ikuspegi
- Cordova
- WaveSurfer
- UI osagaiak
, Quasar-ek mugikorretarako aplikazioak sortzeko dituen gaitasunak erakutsiz.
Kreditu txartelaren formularioa
Kreditu-txartel forma polita, mikro-interakzio leun eta atseginekin. Zenbakien formatua, egiaztapena eta txartel mota automatikoki hautematea barne hartzen ditu. Vue.js-en eraikita dago eta guztiz erantzuten du. (Ikus dezakezu .)
Zer ikasiko duzu:
- Inprimakiak prozesatu eta balioztatu
- Gertaerak kudeatu (adibidez, eremuak aldatzen direnean)
- Ulertzea orrialdean elementuak nola bistaratu eta jarri, batez ere inprimakiaren gainean agertzen den kreditu-txartelaren informazioa
barra grafikoa
Histograma bat datu kategorikoak adierazten dituen taula edo grafikoa da, adierazten dituzten balioekiko altuera edo luzera proportzionalak dituzten barra laukizuzenekin.
Bertikalean edo horizontalean aplika daitezke. Barra-diagrama bertikal bati lerro-diagrama deitzen zaio batzuetan.
Zer ikasiko duzu:
- Erakutsi datuak modu egituratu eta ulergarrian
- Gainera: ikasi elementua nola erabiltzen den
canvaseta harekin elementuak nola marraztu
munduko biztanleriaren datuak aurki ditzakezu. Urteka sailkatuta daude.
Twitter Bihotz Animazioa
2016an, Twitterrek animazio harrigarri hau aurkeztu zuen bere txioetarako. 2019tik aurrera, oraindik ere itxura du, beraz, zergatik ez sortu zuk zeuk?
Zer ikasiko duzu:
- CSS atributuarekin lan egin
keyframes - Manipulatu eta animatu HTML elementuak
- Konbinatu JavaScript, HTML eta CSS
Bila daitezkeen GitHub biltegiak
Hemen ez dago ezer dotorerik: GitHub biltegiak zerrenda goretsi bat besterik ez dira.
Helburua biltegiak bistaratzea eta erabiltzaileak iragazteko aukera ematea da. Erabili erabiltzaile bakoitzaren biltegiak lortzeko.
GitHub profil orria -
Zer ikasiko duzu:
- Jaso datuak APItik
- Bistaratu APIko datuak
- Iragazi eta erakutsi bilaketa bakoitzerako datu garrantzitsuak
- Aukerakoa: erronka bat egiteko prest bazaude, erabili , GraphQL erabiliz eraikia. .
Reddit estiloko txatak
Txatak komunikatzeko modu ezagunak dira, erraztasunagatik eta erabiltzeko erraztasunagatik. Baina zerk elikatzen ditu txat-gela modernoak? WebSockets!
Zer ikasiko duzu:
- Erabili WebSockets, denbora errealeko komunikazioa eta datuen eguneraketak
- Erabiltzaileen sarbide-mailekin lan egin (adibidez, txat-kanal baten jabeak du rola
admin, eta beste batzuk gelan -user) - Inprimakiak prozesatu eta balioztatu - gogoratu, mezu bat bidaltzeko txat-leihoa dela
input - Sortu eta elkartu txat ezberdinetan
- Mezu pertsonalekin lan egin. Erabiltzaileek beste erabiltzaile batzuekin modu pribatuan txateatu dezakete. Funtsean, WebSocket konexio bat ezarriko duzu bi erabiltzaileren artean.
Marra estiloko nabigazioa
Nabigazio hau berezia egiten duena da popover edukiontzia eraldatzen dela edukiari egokitzeko. Trantsizio honek dotorezia dauka popover berri bat ireki eta ixteko ohiko jokabidearekin alderatuta.
Zer ikasiko duzu:
- Konbinatu CSS animazioak trantsizioekin
- Lausotu edukia eta aplikatu klase aktiboa flotatutako elementuari
Pacman
Sortu zure Pacman-en bertsioa. Jokoak nola garatzen diren eta oinarriak ulertzeko modu bikaina da. Erabili JavaScript esparru bat, React edo Vue.
Ikasiko duzu:
- Elementuak nola mugitzen diren
- Nola zehaztu zein tekla sakatu
- Talkaren unea nola zehaztu
- Harago joan zaitezke eta mamuen mugimenduaren kontrolak gehi ditzakezu
Proiektu honen adibide bat aurkituko duzu GitHub
erabiltzaileen kudeaketa
Proiektu GitHub
Erabiltzaileen administraziorako CRUD motako aplikazio bat sortzeak garapenaren oinarriak irakatsiko dizkizu. Hau bereziki erabilgarria da garatzaile berrientzat.
Ikasiko duzu:
- Zer da bideratzea
- Datuak sartzeko formularioak nola kudeatu eta erabiltzaileak zer sartu duen egiaztatu
- Datu-basearekin nola lan egin - ekintzak sortu, irakurri, eguneratu eta ezabatu
Zure tokiko eguraldia egiaztatzea
Proiektu GitHub
Aplikazioak sortu nahi badituzu, hasi eguraldi aplikazio batekin. Proiektu hau Swift erabiliz burutu daiteke.
Aplikazio bat eraikitzen esperientzia lortzeaz gain, ikasiko duzu:
- Nola lan egin APIarekin
- Geolokalizazioa nola erabili
- Egin zure aplikazioa dinamikoagoa testu sarrera gehituta. Bertan, erabiltzaileek euren kokapena sartu ahal izango dute leku zehatz batean eguraldia ikusteko.
API bat beharko duzu. Eguraldiaren datuak lortzeko, erabili OpenWeather APIa. OpenWeather APIari buruzko informazio gehiago.
Txat-leihoa
Nire txat-leihoa martxan, ireki arakatzailearen bi fitxatan
Txat-leiho bat sortzea socketekin hasteko modu ezin hobea da. Pila teknologikoaren aukera handia da. Node.js, adibidez, ezin hobea da.
Socketek nola funtzionatzen duten eta nola inplementatu ikasiko duzu. Hau da proiektu honen abantaila nagusia.
Socketekin lan egin nahi duen Laravel garatzailea bazara, irakurri nire
GitLab CI
Etengabeko integrazioan (CI) berria bazara, jolastu GitLab CI-rekin. Konfiguratu ingurune batzuk eta saiatu proba pare bat egiten. Ez da oso proiektu zaila, baina ziur asko ikasiko duzula bertatik. Garapen talde askok CI erabiltzen ari dira orain. Erabiltzen jakitea erabilgarria da.
Ikasiko duzu:
- Zer da GitLab CI
- Nola konfiguratu
.gitlab-ci.ymlGitLab erabiltzaileari zer egin behar duen esaten diona - Nola zabaldu beste ingurune batzuetan
Webgune analizatzailea
Egin webguneen semantika aztertzen eta haien balorazioa sortzen duen scraper bat. Adibidez, irudietan alt etiketak falta diren egiazta dezakezu. Edo egiaztatu orrialdeak SEO meta-etiketak dituen. Scraper bat sor daiteke erabiltzaile-interfazerik gabe.
Ikasiko duzu:
- Nola funtzionatzen du scraper?
- Nola sortu DOM hautatzaileak
- Nola idatzi algoritmo bat
- Ez baduzu hor gelditu nahi, sortu erabiltzaile-interfaze bat. Egiaztatzen duzun webgune bakoitzean txosten bat ere sor dezakezu.
Sentimenduak hautematea sare sozialetan
Sare sozialetan sentimenduak hautematea ikaskuntza automatikoan sartzeko modu bikaina da.
Sare sozial bakarra aztertzen has zaitezke. Guztiak normalean Twitterrekin hasten dira.
Ikaskuntza automatikoan esperientziarik baduzu, saiatu sare sozial ezberdinetako datuak biltzen eta konbinatzen.
Ikasiko duzu:
- Zer da ikaskuntza automatikoa
Trello klona
Zer ikasiko duzu:
- Eskaerak prozesatzeko bideen antolaketa (Routing).
- Arrastatu eta jaregin.
- Nola sortu objektu berriak (taulak, zerrendak, txartelak).
- Sarrerako datuak prozesatzea eta egiaztatzea.
- Bezeroaren aldetik: nola erabili tokiko biltegiratzea, nola gorde datuak tokiko biltegiratzean, nola irakurri tokiko biltegiratzetik.
- Zerbitzariaren aldetik: datu-baseak nola erabili, datu-basean datuak nola gorde, datu-baseko datuak nola irakurri.
, React+Redux-en egina.
Admin panela
CRUD aplikazio sinplea, oinarriak ikasteko aproposa. Ikas dezagun:
- Erabiltzaileak sortu, erabiltzaileak kudeatu.
- Elkarreragin datu-basearekin - sortu, irakurri, editatu, ezabatu erabiltzaileak.
- Sarrerak balioztatzea eta inprimakiekin lan egitea.
Cryptocurrency tracker (jatorrizko mugikorretarako aplikazioa)
Edozer: Swift, Objective-C, React Native, Java, Kotlin.
Azter dezagun:
- Nola funtzionatzen duten jatorrizko aplikazioak.
- Nola berreskuratu datuak APItik.
- Nola funtzionatzen duten jatorrizko orriaren diseinuak.
- Simulagailu mugikorrekin nola lan egin.
. Zerbait hoberik aurkitzen baduzu, idatzi iruzkinetan.
Interesatzen bazaizu, hemen duzu .
Konfiguratu zure webpack konfigurazioa hutsetik
Teknikoki, hau ez da aplikazio bat, baina oso zeregin erabilgarria da webpack barrutik nola funtzionatzen duen ulertzeko. Orain ez da βkutxa beltzaβ izango, tresna ulergarria baizik.
baldintzak:
- Es7tik es5era (oinarriak) osatu.
- Konpilatu jsx js-era - edo - .vue .js-era (kargatzaileak ikasi beharko dituzu)
- Konfiguratu webpack dev zerbitzaria eta modulu beroa berriro kargatzea. (vue-cli eta create-react-app biak erabiltzen dituzte)
- Erabili Heroku, now.sh edo Github, ikasi webpack proiektuak nola zabaldu.
- Konfiguratu zure aurreprozesadore gogokoena css konpilatzeko - scss, less, stylus.
- Ikasi irudiak eta svg-ak webpack-ekin erabiltzen.
Hackernews klona
Jedi bakoitzak bere Hackernews egin behar du.
Bidean ikasiko duzuna:
- Nola interaktuatu hackernews APIarekin.
- Nola sortu orrialde bakarreko aplikazioa.
- Nola ezarri funtzioak, hala nola iruzkinak ikustea, iruzkin indibidualak, profilak.
- Eskaerak prozesatzeko bideen antolaketa (Routing).
Tudushechka
Serio? Tudushka? Milaka dira. Baina sinetsi iezadazu, ospe horren arrazoi bat dago.
Tudu aplikazioa oinarriak ulertzen dituzula ziurtatzeko modu bikaina da. Saiatu aplikazio bat idazten Vanilla Javascript-en eta beste bat zure gogoko esparruan.
Ikasi:
- Sortu zeregin berriak.
- Egiaztatu eremuak beteta daudela.
- Iragazi zereginak (osatua, aktiboa, guztiak). Erabili
filterΠΈreduce. - Javascript-en oinarriak ulertzea.
Arrastatu eta jaregin zerrenda ordenagarria
Oso lagungarria ulertzeko .
Ikas dezagun:
- Arrastatu eta jaregin APIa
- Sortu UI aberatsak
Messenger klona (jatorrizko aplikazioa)
Web aplikazioek zein jatorrizko aplikazioek nola funtzionatzen duten ulertuko duzu, eta horrek masa grisetik bereiztuko zaitu.
Zer aztertuko dugu:
- Web socketak (berehalako mezuak)
- Nola funtzionatzen duten jatorrizko aplikazioak.
- Nola funtzionatzen duten txantiloiak jatorrizko aplikazioetan.
- Eskaerak prozesatzeko bideak antolatzea jatorrizko aplikazioetan.
Testu-editorea
Testu-editore baten helburua da erabiltzaileen esfortzua murriztea beren formatua baliozko HTML marka bihurtzen saiatzen diren. Testu-editore on batek erabiltzaileei testua modu ezberdinetan formateatzeko aukera ematen die.
Noizbait, denek testu-editorea erabili dute. Beraz, zergatik ez ?
Reddit klona
Albiste sozialen agregazioa, web edukien balorazioa eta eztabaida gune bat da.
Reddit-ek denbora gehien hartzen du, baina horretan jarraitzen dut. Reddit klon bat sortzea programazioa ikasteko modu eraginkorra da (aldi berean Reddit arakatzen duzun bitartean).
Reddit-ek oso aberatsa eskaintzen dizu. Ez utzi ezaugarririk edo egin gauzak ausaz. Bezeroekin eta bezeroekin mundu errealean, ezin duzu ausaz lan egin, edo lana azkar galduko duzu.
Bezero adimentsuak berehala konturatuko dira lana gaizki egiten ari dela eta beste norbait aurkituko dute.
Kode irekiko NPM pakete bat argitaratzea
Javascript kodea idazten baduzu, baliteke paketeen kudeatzailea erabiltzea. Pakete-kudeatzaile batek beste pertsonek idatzi eta argitaratu duten lehendik dagoen kodea berrerabiltzeko aukera ematen du.
Pakete baten garapen-ziklo osoa ulertzeak oso esperientzia ona emango du. Kodea argitaratzean gauza asko jakin behar dituzu. Segurtasunari, bertsio semantikoari, eskalagarritasunari, izen-konbentzioei eta mantentzeari buruz pentsatu behar duzu.
Paketea edozein izan daiteke. Ideiarik ez baduzu, sortu zure Lodash eta argitaratu.
Lodash:
Sarean egin duzun zerbait edukitzeak besteen gainetik %10 jartzen zaitu. iturri irekiei eta paketeei buruz.
freeCodeCamp curriculuma
freeCodecamp-ek asko bildu du .
freeCodeCamp irabazi asmorik gabeko erakunde bat da. Web-oinarritutako ikaskuntza plataforma interaktibo batek, sareko komunitateko foro batek, txat gelak, Medium argitalpenak eta ikaskuntza web garapena guztion eskura jartzeko asmoa duten tokiko erakundeek osatzen dute.
Ikastaro osoa amaitzea lortzen baduzu zure lehen lanerako prestatuta egongo zara.
Sortu HTTP zerbitzari bat hutsetik
HTTP protokoloa edukiak Interneten bidaiatzen dituen protokolo nagusietako bat da. HTTP zerbitzariak HTML, CSS eta JS bezalako eduki estatikoa hornitzeko erabiltzen dira.
HTTP protokoloa hutsetik ezartzeko gai izateak gauzak nola elkarreragiten duen ezagutza zabalduko du.
Adibidez, NodeJs erabiltzen baduzu, badakizu Express-ek HTTP zerbitzari bat eskaintzen duela.
Erreferentziarako, ikusi ahal duzun:
- Konfiguratu zerbitzari bat inongo liburutegirik erabili gabe
- Zerbitzariak HTML, CSS eta JS edukia hornitu behar du.
- Router bat hutsetik ezartzea
- Kontrolatu aldaketak eta eguneratu zerbitzaria
Zergatik ez badakizu, erabili eta saiatu HTTP zerbitzari bat sortzen hutsetik.
Oharrak egiteko mahaigaineko aplikazioa
Denok hartzen ditugu apunteak, ezta?
Sortu dezagun oharren aplikazioa. Aplikazioak oharrak gorde eta datu-basearekin sinkronizatu behar ditu. Sortu jatorrizko aplikazio bat Electron, Swift edo nahi duzuna erabiliz eta zure sistemarako balio duena.
Anima zaitez lehen erronkarekin (testu editorea) konbinatzeko.
Hobari gisa, saiatu zure mahaigaineko bertsioa web bertsioarekin sinkronizatzen.
Podcastak (klon estalia)
Nork ez ditu podcastak entzuten?
Sortu web aplikazio bat funtzionalitate hauekin:
- Kontu bat sortu
- Bilatu podcastak
- Baloratu eta harpidetu podcastetara
- Gelditu eta erreproduzitu, aldatu abiadura, aurrera eta atzera funtzioak 30 segundoz.
Saiatu iTunes APIa abiapuntu gisa erabiltzen. Beste baliabiderik ezagutzen baduzu, idatzi iruzkinetan.
Pantaila harrapatzea
Kaixo! Nire pantaila filmatzen ari naiz orain!
Sortu mahaigaineko edo web aplikazio bat zure pantaila harrapatzeko eta klipa honela gordetzeko aukera ematen dizun .gif
Hemen hori nola lortu.
iturri
Iturria: www.habr.com