1. Clone sa ideya
Ang aplikasyon sa Notion gihigugma sa kadaghanan; gitugotan ka niini nga ma-optimize ang imong daloy sa trabaho, pagtrabaho kauban ang mga dokumento, pag-iskedyul sa mga buluhaton, ug pag-synchronize sa datos tali sa mga aparato.
Unsa ang imong makat-unan pinaagi sa paghimo sa usa ka clone sa Notion:
- . Ang tiggamit mahimong "makakupot gamit ang mouse" mabitad elemento ug ibutang kini droppable sona.
- Giunsa ang pag-synchronize sa data sa tinuud nga oras tali sa imong computer ug smartphone.
- Gitugotan namon ang mga tiggamit sa paghimo, pagbasa, pag-update ug pagtangtang sa mga rekord, sa ingon nagbansay sa mga kahanas sa CRUD.
Ang artikulo gihubad uban ang suporta sa EDISON Software, nga Ug .
2. Repl.it clone
Repl.it kay usa ka himan para sa real-time nga collaborative code editing. Makapili ka ug daghang mga pinulongan: JavaScript, Python, Go ug ipadagan ang code direkta sa browser. Mapuslanon kaayo alang sa dali nga mga demo ug mga interbyu sa code.
Unsa ang imong makat-unan pinaagi sa paghimo og Repl.it clone:
- Giunsa pagpadagan ug pag-execute ang code (server-side) sa browser (client-side).
- Basaha ang input data (source code) ug ipakita ang resulta sa pagpatuman.
- Giunsa paghimo ang mga file ug folder sa web ug i-save ang mga resulta.
- Giunsa ang pag-highlight sa code syntax.
3. Google Photos Clone
Ang Google Photos usa ka serbisyo alang sa pagtipig ug pagpaambit sa mga litrato.
Ang bisan unsang modernong aplikasyon sa litrato makahimo sa mga batakang gimbuhaton: pag-upload, pag-crop, ug uban pa. Gusto sa mga tawo nga maghimo sa ilang kaugalingon nga mga avatar ug magpaambit sa mga litrato sa mga iring, mao nga kinahanglan nimo nga magtrabaho sa mga imahe.
Unsa ang imong makat-unan pinaagi sa paghimo og Google Photos clone:
- Giunsa paghimo ang mga responsive nga mga imahe sa mga telepono, tablet, laptop ug bisan sa higanteng mga screen sa TV.
- Giunsa pagdumala ang mga pag-upload sa imahe, labi na ang dagkong mga imahe (>1MB) ug daghang pag-upload.
- Pagproseso sa mga file sa imahe, pag-crop ug pagbag-o sa mga litrato alang sa mga thumbnail o kung nagbukas sa usa ka gallery.
- bonus: unsaon pagtipig sa mga hulagway sa panganod o lokal nga database.
4. Gifsky clone
nag-convert sa video ngadto sa GIF gamit ang mga function alang sa episyente nga cross-frame palette ug temporal nga anti-aliasing. Ang resulta usa ka GIF nga adunay liboan ka mga bulak matag frame.
Unsa ang imong makat-unan pinaagi sa paghimo og gifski clone:
- Unsaon pag-convert sa mga video file (.mp4 ngadto sa .gif).
- Giunsa paggamit ang Drag and Drop HTML API.
- Giunsa pagtrabaho ang pag-optimize ug pagproseso sa imahe.
Mubo nga sulat: ug naa sa GitHub!
5. Pag-monitor sa mga rate sa cryptocurrency
React Native cryptocurrency tracker
Unsa ang imong makat-unan pinaagi sa paghimo og currency rate tracker:
- Giunsa pagtrabaho ang API ug makadawat og data sa layo gikan sa API.
- Giunsa pagpakita ang datos ingon usa ka lista.
- bonus: Kung interesado ka, bag-o lang ako nagsulat alang sa cryptocurrency nga adunay React Native.
Mubo nga sulat: dinhi .
Usa ka pagpili sa mga proyekto gikan sa miaging mga publikasyon.
layer
Ang Layer usa ka komunidad diin ang tanan makadrowing og pixel sa gipaambit nga "board". Ang orihinal nga ideya natawo sa Reddit. Ang r/Layer nga komunidad usa ka metapora alang sa gipaambit nga pagkamamugnaon, nga ang tanan mahimong usa ka tiglalang ug makatampo sa usa ka komon nga kawsa.
Unsa ang imong makat-unan sa paghimo sa imong kaugalingon nga Layer nga proyekto:
- Giunsa paglihok sa JavaScript nga canvas Ang pagkahibalo kung unsaon pag-operate ang usa ka canvas usa ka kritikal nga kahanas sa daghang mga aplikasyon.
- Giunsa ang pag-coordinate sa mga pagtugot sa tiggamit. Ang matag user mahimong magdrowing og usa ka pixel matag 15 minutos nga dili na kinahanglang mag log in.
- Paghimo og mga sesyon sa cookie.
Squoosh
Ang Squoosh usa ka aplikasyon sa pag-compress sa imahe nga adunay daghang mga advanced nga kapilian.
GIF 20 MB
Pinaagi sa paghimo sa imong kaugalingon nga bersyon sa Squoosh makakat-on ka:
- Giunsa pagtrabaho ang mga gidak-on sa imahe
- Pagkat-on sa mga sukaranan sa Drag'n'Drop API
- Sabta kung giunsa ang API ug mga tigpaminaw sa panghitabo nagtrabaho
- Giunsa ang pag-upload ug pag-export sa mga file
Mubo nga sulat: Ang image compressor kay lokal. Dili kinahanglan nga magpadala dugang nga datos sa server. Mahimo nimo ang compressor sa balay, o mahimo nimo kini gamiton sa usa ka server, nga imong gipili.
Kalkulator
Dali na? Seryoso? Calculator? Oo, eksakto, usa ka calculator. Ang pagsabut sa mga sukaranan sa mga operasyon sa matematika ug kung giunsa sila nagtinabangay usa ka kritikal nga kahanas alang sa pagpayano sa imong mga aplikasyon. Sa madugay o sa madali kinahanglan nimong atubangon ang mga numero ug mas dali nga mas maayo.
Pinaagi sa paghimo sa imong kaugalingon nga calculator makakat-on ka:
- Pagtrabaho sa mga numero ug mga operasyon sa matematika
- Pagpraktis sa mga tigpaminaw sa panghitabo API
- Giunsa ang paghan-ay sa mga elemento, pagsabut sa mga istilo
Crawler (Search engine)
Ang tanan migamit sa usa ka search engine, busa nganong dili paghimo sa imong kaugalingon? Ang mga crawler gikinahanglan sa pagpangita sa impormasyon. Ang tanan naggamit niini kada adlaw ug ang panginahanglan alang niini nga teknolohiya ug mga espesyalista motubo lamang sa paglabay sa panahon.
Google search engine
Unsa ang imong makat-unan pinaagi sa paghimo sa imong kaugalingon nga search engine:
- Giunsa pagtrabaho ang mga crawler
- Giunsa ang pag-index sa mga site ug kung giunsa kini pagranggo pinaagi sa rating ug reputasyon
- Giunsa pagtipig ang mga na-index nga site sa usa ka database ug kung giunsa ang pagtrabaho kauban ang database
Music player (Spotify, Apple Music)
Ang tanan naminaw sa musika - kini usa lamang ka bahin sa atong kinabuhi. Maghimo kita og music player aron mas masabtan kung giunsa ang mga batakang mekaniko sa usa ka modernong music streaming platform nga nagtrabaho.
Spotify
Unsa ang imong makat-unan pinaagi sa paghimo sa imong kaugalingon nga platform sa streaming sa musika:
- Giunsa pagtrabaho ang API. gamita ang API gikan sa Spotify o Apple Music
- Giunsa ang pagdula, paghunong o pag-rewind sa sunod/kaniadto nga track
- Giunsa pagbag-o ang volume
- Giunsa pagdumala ang pag-ruta sa gumagamit ug kasaysayan sa browser
Aplikasyon sa pagpangita sa sine gamit ang React (nga adunay mga kaw-it)
Ang unang butang nga mahimo nimong sugdan mao ang paghimo og movie search app gamit ang React. Sa ubos usa ka imahe kung unsa ang hitsura sa katapusan nga aplikasyon:
Unsa ang imong mahibal-an
Pinaagi sa paghimo niini nga app, mapauswag nimo ang imong kahanas sa React pinaagi sa paggamit sa medyo bag-o nga Hooks API. Ang pananglitan nga proyekto naggamit sa mga sangkap sa React, daghang mga kaw-it, usa ka eksternal nga API, ug siyempre pipila ka estilo sa CSS.
Tech stack ug mga feature
- Pag-react gamit ang mga kaw-it
- paghimo-reaksyon-app
- JSX
- CSS
Kung wala’y paggamit sa bisan unsang klase, kini nga mga proyekto naghatag kanimo ang hingpit nga punto sa pagsulod sa functional React ug siguradong makatabang kanimo sa 2020. makit-an nimo . Sunda ang mga instruksyon o himoa kini nga imong kaugalingon.
Chat App gamit ang Vue
Laing nindot nga proyekto nga imong buhaton mao ang paghimo og chat app gamit ang akong paborito nga JavaScript library: VueJS. Ang aplikasyon tan-awon sama niini:
Unsa ang imong mahibal-an
Sa kini nga panudlo, mahibal-an nimo kung giunsa paghimo ang usa ka Vue app gikan sa wala - paghimo sa mga sangkap, pagdumala sa estado, paghimo og mga ruta, pagkonekta sa mga serbisyo sa ikatulo nga partido, ug bisan ang pagdumala sa pag-authenticate.
Tech stack ug mga feature
- Vue
- vuex
- Vue nga Router
- Vue CLI
- Pusher
- CSS
Kini usa ka maayo kaayo nga proyekto aron makasugod sa Vue o mapaayo ang imong naa na mga kahanas aron mapauswag sa 2020. makit-an nimo .
Nindot nga weather app nga adunay Angular 8
Kini nga pananglitan makatabang kanimo sa paghimo og usa ka matahum nga app sa panahon gamit ang Angular 8:
Unsa ang imong mahibal-an
Kini nga proyekto magtudlo kanimo og bililhon nga mga kahanas sa pagtukod og mga aplikasyon gikan sa wala - gikan sa disenyo hangtod sa pag-uswag, hangtod sa usa ka aplikasyon nga andam na sa pag-deploy.
Tech stack ug mga feature
- Anggulo 8
- Firebase
- Pag-render sa kilid sa server
- CSS uban sa Grid ug Flexbox
- Mobile mahigalaon ug adaptability
- Ngitngit nga mode
- Nindot nga interface
Ang ganahan kaayo nako niining tanan nga proyekto mao nga dili ka magtuon sa mga butang nga nag-inusara. Hinuon, nahibal-an nimo ang tibuuk nga proseso sa pag-uswag, gikan sa disenyo hangtod sa katapusan nga pag-deploy.
Ang aplikasyon nga buhaton gamit ang Svelte
Ang Svelte sama sa bag-ong bata sa component-based approach - labing menos susama sa React, Vue ug Angular. Ug kini usa sa labing kainit nga bag-ong mga produkto alang sa 2020.
Ang mga To-Do nga mga app dili kinahanglan ang labing mainit nga hilisgutan, apan makatabang gyud kini kanimo nga mapauswag ang imong kahanas sa Svelte. Kini tan-awon sama niini:
Unsa ang imong mahibal-an
Kini nga panudlo magpakita kanimo kung giunsa paghimo ang usa ka aplikasyon gamit ang Svelte 3, gikan sa pagsugod hangtod sa katapusan. Magamit nimo ang mga sangkap, estilo, ug tigdumala sa panghitabo
Tech stack ug mga feature
- Hayag 3
- Mga Bahin
- Pag-istilo gamit ang CSS
- ES 6 nga syntax
Wala'y daghang maayo nga mga proyekto sa pagsugod sa Svelte, mao nga nakit-an nako .
E-commerce app gamit ang Next.js
Ang Next.js mao ang pinakasikat nga balangkas alang sa paghimo og mga aplikasyon sa React nga nagsuporta sa pag-render sa kilid sa server sa gawas sa kahon.
Kini nga proyekto magpakita kanimo kung giunsa paghimo ang usa ka aplikasyon sa e-commerce nga ingon niini:
Unsa ang imong mahibal-an
Niini nga proyekto, makakat-on ka unsaon pag-develop gamit ang Next.js—paghimo ug bag-ong mga panid ug mga component, pagkuha sa datos, ug estilo ug pag-deploy ug Next nga aplikasyon.
Tech stack ug mga feature
- Sunod.js
- Mga sangkap ug mga panid
- Pag-sampol sa datos
- Pag-istilo
- Pag-deploy sa Proyekto
- SSR ug SPA
Kanunay nga maayo nga adunay usa ka tinuod nga kalibutan nga pananglitan sama sa usa ka e-commerce app aron makakat-on og bag-o. Mahimo nimo .
Bug-os nga multilinggwal nga blog uban sa Nuxt.js
Ang Nuxt.js para sa Vue, kung unsa ang Next.js para sa React: usa ka maayo nga balangkas alang sa paghiusa sa gahum sa pag-render sa kilid sa server ug mga aplikasyon sa usa ka panid
Ang katapusan nga aplikasyon nga imong mahimo mahimo tan-awon sama niini:
Unsa ang imong mahibal-an
Niini nga sampol nga proyekto, makakat-on ka unsaon paghimo og kompleto nga website gamit ang Nuxt.js, gikan sa inisyal nga pag-setup hangtod sa kataposang pag-deploy.
Gipahimuslan niini ang daghang mga cool nga bahin nga gitanyag sa Nuxt, sama sa mga panid ug sangkap, ug pag-istilo gamit ang SCSS.
Tech stack ug mga feature
- Nuxt.js
- Mga sangkap ug mga panid
- Module sa block sa istorya
- Hagfish
- Vuex alang sa pagdumala sa estado
- SCSS para sa pag-istilo
- Nuxt middlewares
, nga naglakip sa daghang nindot nga mga feature sa Nuxt.js. Ako personal nga ganahan nga magtrabaho uban sa Nuxt mao nga kinahanglan nimo nga sulayan kini tungod kay kini makahimo usab kanimo nga usa ka maayo nga developer sa Vue.
Blog uban ni Gatsby
Ang Gatsby usa ka maayo kaayo nga static site generator gamit ang React ug GraphQL. Mao kini ang resulta sa proyekto:
Unsa ang imong mahibal-an
Sa kini nga panudlo, mahibal-an nimo kung giunsa ang paggamit sa Gatsby aron makahimo usa ka blog nga imong gamiton sa pagsulat sa imong kaugalingon nga mga artikulo gamit ang React ug GraphQL.
Tech stack ug mga feature
- gatsby
- React
- GraphQL
- Mga plugin ug tema
- MDX/Markdown
- Bootstrap CSS
- Mga pattern
Kung gusto nimo magsugod usa ka blog, kung giunsa kini paghimo gamit ang React ug GraphQL.
Wala ko nag-ingon nga ang WordPress usa ka dili maayo nga pagpili, apan sa Gatsby mahimo ka nga magtukod og mga website nga adunay taas nga performance gamit ang React - nga usa ka talagsaon nga kombinasyon.
Blog uban sa Gridsome
Gridsome para sa Vue... Okay, naa na namo kini sa Next/Nuxt.
Apan tinuod usab kini alang sa Gridsome ug Gatsby. Ang duha naggamit sa GraphQL isip ilang data layer, apan ang Gridsome naggamit sa VueJS. Kini usa usab ka talagsaon nga static nga site generator nga makatabang kanimo sa paghimo og maayo nga mga blog:
Unsa ang imong mahibal-an
Kini nga proyekto magtudlo kanimo kung giunsa paghimo ang usa ka yano nga blog aron makasugod sa Gridsome, GraphQL ug Markdown. Gisakup usab niini kung giunsa ang pag-deploy sa usa ka aplikasyon pinaagi sa Netlify.
Tech stack ug mga feature
- Makalilisang
- Vue
- GraphQL
- Markdown
- netlify
Dili gyud kini ang labing komprehensibo nga panudlo, apan gisakup niini ang sukaranan nga mga konsepto sa Gridsome ug .
Sama sa SoundCloud nga audio player gamit ang Quasar
Ang Quasar maoy laing Vue framework nga magamit sa paghimo og mga mobile application. Niini nga proyekto maghimo ka usa ka aplikasyon sa audio player, pananglitan:
Unsa ang imong mahibal-an
Samtang ang ubang mga proyekto nagpunting sa panguna sa mga aplikasyon sa web, kini magpakita kanimo kung giunsa paghimo ang usa ka mobile application gamit ang Vue ug ang Quasar framework.
Kinahanglan nga naa na nimo ang Cordova nga nagdagan sa Android Studio/Xcode nga gi-configure. Kung dili, ang manwal adunay link sa website sa Quasar diin gipakita nila kanimo kung giunsa ang pag-set up sa tanan.
Tech stack ug mga feature
- quasar
- Vue
- Cordova
- wavesurfer
- Mga sangkap sa UI
, nga nagpakita sa mga kapabilidad ni Quasar sa paghimo og mga mobile application.
porma sa credit card
Usa ka cool nga porma sa credit card nga adunay hapsay ug makalingaw nga micro-interaksyon. Naglakip sa pag-format sa numero, pag-verify ug awtomatikong pag-ila sa tipo sa kard. Gitukod kini sa Vue.js ug hingpit usab nga mosanong. (Makita nimo .)
Unsa ang imong makat-unan:
- Pagproseso ug pag-validate sa mga porma
- Pagdumala sa mga panghitabo (pananglitan, kung magbag-o ang mga field)
- Sabta kung giunsa pagpakita ug pagbutang ang mga elemento sa panid, labi na ang impormasyon sa credit card nga makita sa ibabaw sa porma
tsart sa bar
Ang histogram kay usa ka tsart o graph nga nagrepresentar sa categorical data nga adunay rectangular bars nga adunay gitas-on o gitas-on nga proporsyonal sa mga value nga ilang girepresentahan.
Mahimo silang i-apply sa vertically o horizontally. Ang bertikal nga bar chart usahay gitawag nga line chart.
Unsa ang imong makat-unan:
- Ipakita ang datos sa usa ka structured ug masabtan nga paagi
- Dugang pa: Pagkat-on unsaon paggamit ang elemento
canvasug unsaon pagdrowing og mga elemento niini
makit-an nimo ang datos sa populasyon sa kalibutan. Gihan-ay sila sa tuig.
Twitter Heart Animation
Balik sa 2016, gipaila sa Twitter kining talagsaon nga animation alang sa mga tweet niini. Hangtud sa 2019, kini tan-awon gihapon ang bahin, busa ngano nga dili maghimo usa sa imong kaugalingon?
Unsa ang imong makat-unan:
- Pagtrabaho uban ang CSS attribute
keyframes - Pagmaniobra ug pag-animate sa mga elemento sa HTML
- Paghiusa sa JavaScript, HTML ug CSS
Mapangita nga mga repositoryo sa GitHub
Wala’y bisan unsa nga nindot dinhi — ang mga repositoryo sa GitHub usa ra ka gihimaya nga lista.
Ang tumong mao ang pagpakita sa mga repositoryo ug tugotan ang tiggamit sa pagsala niini. Paggamit aron makakuha mga repository alang sa matag tiggamit.
panid sa profile sa GitHub -
Unsa ang imong makat-unan:
- Pagdawat sa datos gikan sa API
- Ipakita ang datos gikan sa API
- Pagsala ug ipakita ang may kalabutan nga datos alang sa matag pagpangita
- Opsyonal: Kung andam ka sa usa ka hagit, gamita , gitukod gamit ang GraphQL. .
Mga chat sa istilo sa Reddit
Ang mga chat usa ka popular nga paagi sa komunikasyon tungod sa ilang kayano ug kadali sa paggamit. Apan unsa ba gayod ang nakapadasig sa modernong mga chat room? Mga WebSocket!
Unsa ang imong makat-unan:
- Gamita ang WebSockets, real-time nga komunikasyon ug mga update sa datos
- Pagtrabaho uban ang lebel sa pag-access sa user (pananglitan, ang tag-iya sa usa ka channel sa chat adunay papel
admin, ug uban pa sa kwarto -user) - Pagproseso ug pag-validate sa mga porma - hinumdomi, ang chat window alang sa pagpadala usa ka mensahe
input - Paghimo ug pag-apil sa lainlaing mga chat
- Pagtrabaho uban ang personal nga mga mensahe. Ang mga tiggamit mahimong makig-chat sa ubang mga tiggamit sa pribado. Sa tinuud, magtukod ka usa ka koneksyon sa WebSocket tali sa duha nga tiggamit.
Pag-navigate sa estilo sa stripe
Ang nakapahimo sa kini nga nabigasyon nga talagsaon mao nga ang sulud sa popover nagbag-o aron mohaum sa sulud. Adunay usa ka elegante sa kini nga transisyon kung itandi sa tradisyonal nga pamatasan sa pag-abli ug pagsira sa usa ka bag-ong popover.
Unsa ang imong makat-unan:
- Paghiusa sa mga animation sa CSS sa mga transisyon
- Ipadpad ang sulod ug ipadapat ang aktibong klase sa naglutaw nga elemento
Pacman
Paghimo sa imong kaugalingon nga bersyon sa Pacman. Kini usa ka maayo nga paagi aron makakuha usa ka ideya kung giunsa ang mga dula naugmad ug masabtan ang mga sukaranan. Gamit ug JavaScript framework, React o Vue.
Mahibal-an nimo:
- Giunsa paglihok ang mga elemento
- Giunsa pagtino kung unsang mga yawe ang ipadayon
- Giunsa pagtino ang higayon sa pagbangga
- Makapadayon ka ug makadugang mga kontrol sa paglihok sa multo
Makita nimo ang usa ka pananglitan niini nga proyekto GitHub
pagdumala sa tiggamit
Ang proyekto GitHub
Ang paghimo og CRUD type nga aplikasyon para sa user administration magtudlo kanimo sa mga sukaranan sa kalamboan. Kini labi ka mapuslanon alang sa mga bag-ong developer.
Mahibal-an nimo:
- Unsa ang routing
- Giunsa pagdumala ang mga porma sa pagsulod sa datos ug susihon kung unsa ang gisulod sa tiggamit
- Giunsa pagtrabaho ang database - paghimo, pagbasa, pag-update ug pagtangtang sa mga aksyon
Pagsusi sa panahon sa imong lokasyon
Ang proyekto GitHub
Kung gusto nimo maghimo og mga app, magsugod sa usa ka weather app. Kini nga proyekto mahimong makompleto gamit ang Swift.
Dugang sa pag-angkon og kasinatian sa paghimo og aplikasyon, makakat-on ka:
- Giunsa pagtrabaho ang API
- Giunsa paggamit ang geolocation
- Himua nga mas dinamiko ang imong aplikasyon pinaagi sa pagdugang sa input sa teksto. Niini, ang mga tiggamit makasulod sa ilang lokasyon aron masusi ang panahon sa usa ka piho nga lokasyon.
Kinahanglan nimo ang usa ka API. Aron makakuha og datos sa panahon, gamita ang OpenWeather API. Dugang nga impormasyon bahin sa OpenWeather API.
Chat window
Ang akong chat window sa aksyon, abli sa duha ka tab sa browser
Ang paghimo og chat window mao ang hingpit nga paagi sa pagsugod sa mga socket. Ang pagpili sa tech stack dako kaayo. Ang Node.js, pananglitan, perpekto.
Mahibal-an nimo kung giunsa ang mga socket ug kung giunsa kini ipatuman. Kini ang panguna nga bentaha sa kini nga proyekto.
Kung ikaw usa ka developer sa Laravel nga gusto nga magtrabaho sa mga socket, basaha ang akong
GitLab CI
Kung bag-o ka sa padayon nga panagsama (CI), pagdula sa GitLab CI. Pag-set up og pipila ka palibot ug sulayi pagdagan ang pipila ka mga pagsulay. Dili kini usa ka lisud nga proyekto, apan sigurado ako nga daghan ka nga makat-unan gikan niini. Daghang mga development team ang naggamit na karon sa CI. Ang pagkahibalo kon unsaon paggamit kini mapuslanon.
Mahibal-an nimo:
- Unsa ang GitLab CI
- Unsaon pag-configure
.gitlab-ci.ymlnga nagsulti sa GitLab user kung unsa ang buhaton - Giunsa ang pag-deploy sa ubang mga palibot
Analista sa website
Paghimo usa ka scraper nga nag-analisar sa mga semantiko sa mga website ug nagmugna sa ilang rating. Pananglitan, mahimo nimong susihon ang nawala nga mga tag sa alt sa mga imahe. O susiha kung ang panid adunay mga meta tag sa SEO. Ang usa ka scraper mahimo nga walay user interface.
Mahibal-an nimo:
- Giunsa pagtrabaho ang scraper?
- Giunsa paghimo ang mga tigpili sa DOM
- Giunsa pagsulat ang usa ka algorithm
- Kung dili nimo gusto nga mohunong didto, paghimo usa ka user interface. Mahimo ka usab nga maghimo usa ka taho sa matag website nga imong susihon.
Определение настроений в социальных сетях
Ang pag-detect sa sentimento sa social media usa ka maayong paagi sa pagpaila sa pagkat-on sa makina.
Makasugod ka pinaagi sa pag-analisar sa usa lang ka social network. Ang tanan kasagaran magsugod sa Twitter.
Kung ikaw adunay kasinatian sa pagkat-on sa makina, sulayi ang pagkolekta sa datos gikan sa lainlaing mga social network ug paghiusa kini.
Mahibal-an nimo:
- Unsa ang pagkat-on sa makina
Trello clone
Unsa ang imong makat-unan:
- Organisasyon sa mga ruta sa pagproseso sa hangyo (Routing).
- I-drag ug ihulog.
- Giunsa paghimo ang bag-ong mga butang (mga tabla, mga lista, mga kard).
- Pagproseso ug pagsusi sa input data.
- Gikan sa bahin sa kliyente: kung giunsa paggamit ang lokal nga pagtipig, kung giunsa ang pagtipig sa datos sa lokal nga pagtipig, kung giunsa pagbasa ang datos gikan sa lokal nga pagtipig.
- Gikan sa kilid sa server: kung giunsa paggamit ang mga database, kung giunsa ang pagtipig sa datos sa database, kung giunsa pagbasa ang datos gikan sa database.
, gihimo sa React+Redux.
Admin panel
Usa ka yano nga aplikasyon sa CRUD, sulundon alang sa pagkat-on sa mga sukaranan. Atong tun-an:
- Paghimo mga tiggamit, pagdumala sa mga tiggamit.
- Pakigsulti sa database - paghimo, pagbasa, pag-edit, pagtangtang sa mga tiggamit.
- Pag-validate sa input ug pagtrabaho sa mga porma.
Cryptocurrency tracker (lumad nga mobile app)
Bisan unsa: Swift, Objective-C, React Native, Java, Kotlin.
Magtuon ta:
- Giunsa pagtrabaho ang lumad nga mga aplikasyon.
- Giunsa pagkuha ang datos gikan sa API.
- Giunsa pagtrabaho ang mga layout sa lumad nga panid.
- Giunsa pagtrabaho ang mga mobile simulator.
. Kung makakita ka og mas maayo, isulat sa mga komento.
Kung interesado ka, ania na .
I-set up ang imong kaugalingon nga webpack config gikan sa wala
Sa teknikal, kini dili usa ka aplikasyon, apan kini usa ka mapuslanon kaayo nga buluhaton aron masabtan kung giunsa ang webpack molihok gikan sa sulod. Karon kini dili usa ka "itom nga kahon", apan usa ka masabtan nga himan.
Mga kinahanglanon:
- Compile es7 ngadto sa es5 (basic).
- I-compile ang jsx ngadto sa js - o - .vue ngadto sa .js (kinahanglan nimong tun-an ang mga loader)
- I-set up ang webpack dev server ug init nga module reloading. (vue-cli ug create-react-app gamiton ang duha)
- Gamita ang Heroku, now.sh o Github, pagkat-on unsaon pag-deploy sa mga proyekto sa webpack.
- I-set up ang imong paborito nga preprocessor aron ma-compile ang css - scss, less, stylus.
- Pagkat-on unsaon paggamit ang mga imahe ug svg gamit ang webpack.
Hackernews clone
Ang matag Jedi gikinahanglan sa paghimo sa iyang kaugalingon nga Hackernews.
Unsa ang imong makat-unan sa dalan:
- Giunsa ang pagpakig-uban sa hackernews API.
- Giunsa paghimo ang usa ka aplikasyon sa panid.
- Giunsa pagpatuman ang mga bahin sama sa pagtan-aw sa mga komento, indibidwal nga mga komento, mga profile.
- Organisasyon sa mga ruta sa pagproseso sa hangyo (Routing).
Tudushechka
Seryoso? Tudushka? Adunay liboan niini. Apan pagtuo kanako, adunay usa ka rason alang niini nga pagkapopular.
Ang Tudu app usa ka maayong paagi aron masiguro nga nasabtan nimo ang mga sukaranan. Sulayi pagsulat ang usa ka aplikasyon sa vanilla Javascript ug usa sa imong paborito nga balangkas.
Pagkat-on:
- Paghimo og bag-ong mga buluhaton.
- Susiha nga ang mga field napuno.
- Pagsala sa mga buluhaton (nakompleto, aktibo, tanan). Paggamit
filterиreduce. - Sabta ang mga sukaranan sa Javascript.
Sortable drag ug drop list
Makatabang kaayo nga masabtan .
Atong tun-an:
- I-drag ug ihulog ang API
- Paghimo daghang mga UI
Messenger clone (lumad nga app)
Makasabot ka kung giunsa ang mga aplikasyon sa web ug mga lumad nga aplikasyon nagtrabaho, nga makapalain kanimo gikan sa gray nga masa.
Unsa ang atong tun-an:
- Mga socket sa web (mga instant nga mensahe)
- Giunsa pagtrabaho ang lumad nga mga aplikasyon.
- Giunsa pagtrabaho ang mga template sa lumad nga aplikasyon.
- Pag-organisar sa mga ruta sa pagproseso sa hangyo sa lumad nga mga aplikasyon.
Text editor
Ang katuyoan sa usa ka text editor mao ang pagpakunhod sa paningkamot sa mga tiggamit nga naningkamot sa pag-convert sa ilang pag-format ngadto sa balido nga HTML markup. Ang usa ka maayo nga editor sa teksto nagtugot sa mga tiggamit sa pag-format sa teksto sa lainlaing mga paagi.
Sa usa ka punto, ang tanan migamit ug text editor. Busa nganong dili ?
Reddit clone
kay usa ka social news aggregation, web content rating ug discussion site.
Gikuha sa Reddit ang kadaghanan sa akong oras, apan nagpadayon ako sa pagbitay niini. Ang paghimo og Reddit clone usa ka epektibo nga paagi sa pagkat-on sa programming (samtang nag-browse sa Reddit sa samang higayon).
Ang Reddit naghatag kanimo usa ka adunahan kaayo. Ayaw biyai ang bisan unsang mga bahin o buhata ang mga butang nga wala’y hinungdan. Sa tinuud nga kalibutan nga adunay mga kliyente ug kustomer, dili ka makatrabaho nga wala’y trabaho, o dali ka nga mawad-an sa imong trabaho.
Ang mga kliyente nga maalamon makaamgo dayon nga ang trabaho dili maayo nga nahimo ug mangita og lain.
Pagpatik ug open source NPM package
Kung nagsulat ka sa Javascript code, lagmit nga mogamit ka usa ka manager sa package. Gitugotan ka sa tagdumala sa pakete nga magamit pag-usab ang kasamtangan nga code nga gisulat ug gipatik sa ubang mga tawo.
Ang pagsabut sa tibuuk nga siklo sa pag-uswag sa usa ka pakete maghatag usa ka maayo kaayo nga kasinatian. Adunay daghang mga butang nga kinahanglan nimong mahibal-an kung mag-publish sa code. Kinahanglan nimong hunahunaon ang bahin sa seguridad, semantic versioning, scalability, name conventions ug maintenance.
Ang pakete mahimong bisan unsa. Kung wala kay ideya, paghimo og imong kaugalingon nga Lodash ug i-publish kini.
Lodash:
Ang pagbaton sa usa ka butang nga imong nahimo online nagbutang kanimo og 10% labaw sa uban. mahitungod sa bukas nga mga tinubdan ug mga pakete.
Учебный план freeCodeCamp
Ang freeCodecamp daghan ang nakolekta .
Ang freeCodeCamp usa ka non-profit nga organisasyon. Naglangkob kini sa usa ka interactive nga web-based nga plataporma sa pagkat-on, usa ka online nga forum sa komunidad, mga chat room, Medium nga mga publikasyon, ug mga lokal nga organisasyon nga nagtinguha sa paghimo sa pagkat-on sa web development nga ma-access sa tanan.
Mahimong labaw ka kuwalipikado alang sa imong una nga trabaho kung mahuman nimo ang tibuuk nga kurso.
Paghimo og HTTP server gikan sa scratch
Ang HTTP protocol mao ang usa sa mga nag-unang protocol diin ang sulod mobiyahe sa Internet. Ang mga HTTP server gigamit sa pag-alagad sa static nga sulod sama sa HTML, CSS, ug JS.
Ang makahimo sa pag-implementar sa HTTP nga protocol gikan sa sinugdan makapalapad sa imong kahibalo kon sa unsang paagi ang mga butang makig-uban.
Pananglitan, kung mogamit ka sa NodeJs, nahibal-an nimo nga ang Express naghatag usa ka HTTP server.
Alang sa pakisayran, tan-awa kung mahimo nimo:
- Pag-set up sa usa ka server nga wala mogamit bisan unsang mga librarya
- Ang server kinahanglang mag-alagad sa HTML, CSS ug JS nga sulod.
- Pagpatuman sa usa ka router gikan sa wala
- Pag-monitor sa mga pagbag-o ug pag-update sa server
Kung wala ka kahibalo kung ngano, gamita ug sulayi paghimo og HTTP server gikan sa nagaras.
Desktop app para sa mga nota
Tanan kita nagkuha og mga nota, dili ba?
Magbuhat ta ug notes app. Kinahanglan nga i-save sa aplikasyon ang mga nota ug i-synchronize kini sa database. Paghimo usa ka lumad nga app gamit ang Electron, Swift, o bisan unsa nga gusto nimo ug kung unsa ang magamit sa imong sistema.
Mobati nga gawasnon nga ikombinar kini sa unang hagit (text editor).
Isip usa ka bonus, sulayi ang pag-sync sa imong desktop nga bersyon sa web nga bersyon.
Mga Podcast (Overcast clone)
Kinsa ang dili maminaw sa mga podcast?
Paghimo og web application nga adunay mosunod nga gamit:
- Paghimo og account
- Pangitaa ang mga Podcast
- Pag-rate ug pag-subscribe sa mga podcast
- Hunong ug dula, usba ang katulin, unahan ug paatras nga mga gimbuhaton sa 30 segundos.
Sulayi ang paggamit sa iTunes API isip usa ka punto sa pagsugod. Kung nahibal-an nimo ang bisan unsang ubang mga kapanguhaan, palihug i-post sa mga komento.
Pagdakop sa screen
Hello! Gikuha nako ang akong screen karon!
Paghimo usa ka desktop o web app nga nagtugot kanimo nga makuha ang imong screen ug i-save ang clip ingon .gif
dinhi unsaon pagkab-ot niini.
Mga tinubdan
Source: www.habr.com