ProHoster > Blog > lajme në internet > Dojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)

Dojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)

1. Nocioni klon

Aplikacioni Notion është i pëlqyer nga shumë njerëz, ai ju lejon të optimizoni rrjedhën tuaj të punës, të punoni me dokumente, të planifikoni detyra dhe të sinkronizoni të dhënat midis pajisjeve.

Dojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)

www.notion.so

ÇfarĂ« do tĂ« mĂ«soni duke krijuar njĂ« klon Notion:

  • HTML Zvarrit dhe lĂ«sho API-nĂ«. PĂ«rdoruesi mund tĂ« "kapĂ« me miun" zvarritshĂ«m element dhe vendoseni nĂ« me rĂ«nie zonĂ«.
  • Si tĂ« sinkronizoni tĂ« dhĂ«nat nĂ« kohĂ« reale midis kompjuterit tuaj dhe smartphone.
  • Ne i lejojmĂ« pĂ«rdoruesit tĂ« krijojnĂ«, lexojnĂ«, pĂ«rditĂ«sojnĂ« dhe fshijnĂ« tĂ« dhĂ«nat, duke trajnuar kĂ«shtu aftĂ«sitĂ« CRUD.

Dojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)

Artikulli është përkthyer me mbështetjen e EDISON Software, i cili zhvillon aplikacione dhe faqe internetiDhe investon në startup.

2. Repl.it klon

Repl.it është një mjet për redaktimin e kodit bashkëpunues në kohë reale. Ju mund të zgjidhni disa gjuhë: JavaScript, Python, Go dhe ekzekutoni kodin direkt në shfletues. Shumë i dobishëm për demonstrime të shpejta dhe intervista me kod.

Dojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)

repl.it

ÇfarĂ« do tĂ« mĂ«soni duke krijuar njĂ« klon Repl.it:

  • Si tĂ« ekzekutoni dhe ekzekutoni kodin (nga ana e serverit) nĂ« shfletues (nga ana e klientit).
  • Lexoni tĂ« dhĂ«nat hyrĂ«se (kodin burimor) dhe shfaqni rezultatin e ekzekutimit.
  • Si tĂ« krijoni skedarĂ« dhe dosje nĂ« ueb dhe si tĂ« ruani rezultatet.
  • Si tĂ« nĂ«nvizoni sintaksĂ«n e kodit.

3. Klonimi i Google Photos

Google Photos është një shërbim për ruajtjen dhe ndarjen e fotografive.
Çdo aplikacion modern fotografik mund tĂ« kryejĂ« funksionet bazĂ«: ngarkimi, prerja, etj. NjerĂ«zit duan tĂ« krijojnĂ« avatarĂ«t e tyre dhe tĂ« ndajnĂ« fotot e maceve, kĂ«shtu qĂ« ju duhet tĂ« jeni nĂ« gjendje tĂ« punoni me imazhe.

Dojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)

www.google.com/photos/about

ÇfarĂ« do tĂ« mĂ«soni duke krijuar njĂ« klon tĂ« Google Photos:

  • Si tĂ« krijoni imazhe tĂ« pĂ«rgjegjshme nĂ« telefona, tableta, laptopĂ« dhe madje edhe ekrane gjigante televizive.
  • Si tĂ« trajtoni ngarkimet e imazheve, veçanĂ«risht imazhet e mĂ«dha (> 1 MB) dhe ngarkimet me shumicĂ«.
  • PĂ«rpunoni skedarĂ«t e imazheve, prisni dhe ndryshoni pĂ«rmasat e fotografive pĂ«r miniaturĂ« ose kur hapni njĂ« galeri.
  • Bonus: si tĂ« ruani imazhet nĂ« cloud ose nĂ« bazĂ«n e tĂ« dhĂ«nave lokale.

4. Klon Gifsky

gifski konverton videon në GIF duke përdorur funksionete shquar për paleta efikase ndër-kornizash dhe anti-aliasing të përkohshëm. Rezultati është një GIF me mijëra lule për kornizë.

Dojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)

gif.ski

ÇfarĂ« do tĂ« mĂ«soni duke krijuar njĂ« klon Gifski:

  • Si tĂ« konvertoni skedarĂ«t video (.mp4 nĂ« .gif).
  • Si tĂ« pĂ«rdorni API HTML Drag and Drop.
  • Si funksionon optimizimi dhe pĂ«rpunimi i imazhit.

Shenim: Gifsky është një projekt me burim të hapur dhe është në GitHub!

5. Monitorimi i normave të kriptomonedhës

Dojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)

Gjurmuesi i kriptomonedhës React Native

ÇfarĂ« do tĂ« mĂ«soni duke krijuar njĂ« gjurmues tĂ« kursit tĂ« monedhĂ«s:

  • Si tĂ« punoni me API dhe tĂ« merrni tĂ« dhĂ«na nga distanca nga API.
  • Si tĂ« shfaqni tĂ« dhĂ«nat si njĂ« listĂ«.
  • Bonus: NĂ«se jeni tĂ« interesuar, kam shkruar sĂ« fundmi tutorial pĂ«r krijimin e njĂ« gjurmuesi çmimesh pĂ«r kriptomonedhĂ«n me React Native.

Shenim: Këtu Depoja e shembujve të GitHub.

Një përzgjedhje e projekteve nga botimet e mëparshme.

shtresë

Dojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)

www.reddit.com/r/layer

Shtresa është një komunitet ku të gjithë mund të vizatojnë një piksel në një "bordë" të përbashkët. Ideja origjinale lindi në Reddit. Komuniteti r/Layer është një metaforë për krijimtarinë e përbashkët, që të gjithë mund të jenë krijues dhe të kontribuojnë në një kauzë të përbashkët.

ÇfarĂ« do tĂ« mĂ«soni kur krijoni projektin tuaj Layer:

  • Si funksionon kanavacja JavaScript TĂ« dini se si tĂ« pĂ«rdorni njĂ« kanavac Ă«shtĂ« njĂ« aftĂ«si kritike nĂ« shumĂ« aplikacione.
  • Si tĂ« koordinoni lejet e pĂ«rdoruesve. Çdo pĂ«rdorues mund tĂ« vizatojĂ« njĂ« piksel çdo 15 minuta pa pasur nevojĂ« tĂ« identifikohet.
  • Krijo sesione cookie.

Squoosh

Dojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)
squoosh.app

Squoosh është një aplikacion për kompresimin e imazhit me shumë opsione të avancuara.

GIF 20 MBDojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)

Duke krijuar versionin tuaj të Squoosh do të mësoni:

  • Si tĂ« punoni me madhĂ«sitĂ« e imazhit
  • MĂ«soni bazat e Drag'n'Drop API
  • Kuptoni se si funksionojnĂ« API dhe dĂ«gjuesit e ngjarjeve
  • Si tĂ« ngarkoni dhe eksportoni skedarĂ«

Shenim: Kompresori i imazhit është lokal. Nuk është e nevojshme të dërgoni të dhëna shtesë në server. Ju mund ta keni kompresorin në shtëpi, ose mund ta përdorni në një server, sipas zgjedhjes suaj.

kalkulatriçe

Eja? Seriozisht? Llogaritësi? Po, saktësisht, një kalkulator. Të kuptuarit e bazave të operacioneve matematikore dhe se si ato funksionojnë së bashku është një aftësi kritike për thjeshtimin e aplikacioneve tuaja. Herët a vonë do t'ju duhet të merreni me numra dhe sa më shpejt aq më mirë.

Dojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)
jarodburchill.github.io/CalculatorReactApp

Duke krijuar kalkulatorin tuaj do të mësoni:

  • Puna me numra dhe veprime matematikore
  • Praktikoni me API-nĂ« e dĂ«gjuesve tĂ« ngjarjeve
  • Si tĂ« rregulloni elementet, tĂ« kuptoni stilet

Zvarritës (motori i kërkimit)

Të gjithë kanë përdorur një motor kërkimi, kështu që pse të mos krijoni tuajin? Zvarritësit nevojiten për të kërkuar informacion. Të gjithë i përdorin ato çdo ditë dhe kërkesa për këtë teknologji dhe specialistë vetëm sa do të rritet me kalimin e kohës.

Dojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)
Motori i kërkimit Google

ÇfarĂ« do tĂ« mĂ«soni duke krijuar motorin tuaj tĂ« kĂ«rkimit:

  • Si funksionojnĂ« zvarritĂ«sit
  • Si tĂ« indeksoni faqet dhe si t'i renditni ato sipas vlerĂ«simit dhe reputacionit
  • Si tĂ« ruani faqet e indeksuara nĂ« njĂ« bazĂ« tĂ« dhĂ«nash dhe si tĂ« punoni me bazĂ«n e tĂ« dhĂ«nave

Luajtësi muzikor (Spotify, Apple Music)

Të gjithë dëgjojnë muzikë - është thjesht një pjesë integrale e jetës sonë. Le të krijojmë një luajtës muzikor për të kuptuar më mirë se si funksionon mekanika bazë e një platforme moderne të transmetimit muzikor.

Dojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)
Spotify

ÇfarĂ« do tĂ« mĂ«soni duke krijuar platformĂ«n tuaj tĂ« transmetimit tĂ« muzikĂ«s:

  • Si tĂ« punoni me API. pĂ«rdorni API nga Spotify ose Apple Music
  • Si tĂ« luani, tĂ« ndaloni ose tĂ« ktheheni te pjesa tjetĂ«r/e mĂ«parshme
  • Si tĂ« ndryshoni volumin
  • Si tĂ« menaxhoni rrugĂ«n e pĂ«rdoruesit dhe historinĂ« e shfletuesit

Aplikacioni i kërkimit të filmit duke përdorur React (me grepa)

Gjëja e parë me të cilën mund të filloni është të krijoni një aplikacion kërkimi filmash duke përdorur React. Më poshtë është një imazh se si do të duket aplikacioni përfundimtar:

Dojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)

ÇfarĂ« do tĂ« mĂ«soni
Duke ndërtuar këtë aplikacion, ju do të përmirësoni aftësitë tuaja React duke përdorur API-në relativisht të re Hooks. Projekti shembull përdor komponentë React, shumë grepa, një API të jashtëm dhe sigurisht disa stilime CSS.

Rafte dhe veçori teknike

  • Reagoni me grepa
  • krijoni-reagoni-aplikacionin
  • Jsx
  • CSS

Pa përdorur asnjë klasë, këto projekte ju japin pikën perfekte të hyrjes në React funksional dhe patjetër do t'ju ndihmojnë në vitin 2020. mund të gjesh shembull projekti këtu. Ndiqni udhëzimet ose bëjeni tuajin.

Aplikacioni i bisedës me Vue

Një tjetër projekt i mrekullueshëm që duhet të bëni është të krijoni një aplikacion bisede duke përdorur bibliotekën time të preferuar JavaScript: VueJS. Aplikacioni do të duket diçka si kjo:

Dojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)

ÇfarĂ« do tĂ« mĂ«soni
Në këtë tutorial, do të mësoni se si të krijoni një aplikacion Vue nga e para - krijimin e komponentëve, trajtimin e gjendjes, krijimin e rrugëve, lidhjen me shërbimet e palëve të treta dhe madje edhe trajtimin e vërtetimit.

Rafte dhe veçori teknike

  • Vue
  • vuex
  • Ruteri Vue
  • Pamja CLI
  • Karierist
  • CSS

Ky është një projekt vërtet i mrekullueshëm për të filluar me Vue ose për të përmirësuar aftësitë tuaja ekzistuese për të hyrë në zhvillim në 2020. mund të gjesh tutorial këtu.

Aplikacion i bukur i motit me Angular 8

Ky shembull do t'ju ndihmojë të krijoni një aplikacion të bukur të motit duke përdorur Angular 8:

Dojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)

ÇfarĂ« do tĂ« mĂ«soni
Ky projekt do t'ju mësojë aftësi të vlefshme në ndërtimin e aplikacioneve nga e para - nga dizajni në zhvillim, deri te një aplikacion i gatshëm për vendosje.

Rafte dhe veçori teknike

  • KĂ«ndor 8
  • Firebase
  • Paraqitja nga ana e serverit
  • CSS me Grid dhe Flexbox
  • MiqĂ«si nĂ« celular dhe pĂ«rshtatshmĂ«ri
  • MĂ«nyra e errĂ«t
  • NdĂ«rfaqe e bukur

Ajo që më pëlqen vërtet në këtë projekt gjithëpërfshirës është se ju nuk i studioni gjërat në izolim. Në vend të kësaj, ju mësoni të gjithë procesin e zhvillimit, nga dizajni deri në vendosjen përfundimtare.

Aplikacioni për të bërë duke përdorur Svelte

Svelte është si fëmija i ri në qasjen e bazuar në komponentë - të paktën i ngjashëm me React, Vue dhe Angular. Dhe ky është një nga produktet e reja më të nxehta për vitin 2020.

Aplikacionet për të bërë nuk janë domosdoshmërisht tema më e nxehtë, por me të vërtetë do t'ju ndihmojë të përmirësoni aftësitë tuaja Svelte. Do të duket kështu:

Dojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)

ÇfarĂ« do tĂ« mĂ«soni
Ky tutorial do t'ju tregojë se si të krijoni një aplikacion duke përdorur Svelte 3, nga fillimi në fund. Ju do të përdorni komponentë, stilim dhe mbajtës të ngjarjeve

Rafte dhe veçori teknike

  • E shkathĂ«t 3
  • Komponentet
  • Stilimi me CSS
  • Sintaksa ES 6

Nuk ka shumë projekte të mira fillestare Svelte, kështu që gjeta ky është një opsion i mirë për të filluar.

Aplikacioni i tregtisë elektronike duke përdorur Next.js

Next.js është korniza më e njohur për ndërtimin e aplikacioneve React që mbështesin paraqitjen jashtë kutisë nga ana e serverit.

Ky projekt do t'ju tregojë se si të krijoni një aplikacion e-commerce që duket si ky:

Dojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)

ÇfarĂ« do tĂ« mĂ«soni
NĂ« kĂ«tĂ« projekt, do tĂ« mĂ«soni se si tĂ« zhvilloni me Next.js—krijoni faqe dhe komponentĂ« tĂ« rinj, nxirrni tĂ« dhĂ«na dhe stiloni dhe vendosni njĂ« aplikacion Next.

Rafte dhe veçori teknike

  • Tjetra.js
  • KomponentĂ«t dhe Faqet
  • Mostrimi i tĂ« dhĂ«nave
  • Stilizimi
  • Vendosja e projektit
  • SSR dhe SPA

ËshtĂ« gjithmonĂ« mirĂ« tĂ« kesh njĂ« shembull tĂ« botĂ«s reale si njĂ« aplikacion e-commerce pĂ«r tĂ« mĂ«suar diçka tĂ« re. Ti mundesh gjeni tutorialin kĂ«tu.

Blog shumëgjuhësh i plotë me Nuxt.js

Nuxt.js është për Vue, çfarë është Next.js për React: një kornizë e shkëlqyeshme për kombinimin e fuqisë së paraqitjes nga serveri dhe aplikacioneve me një faqe
Aplikacioni përfundimtar që mund të krijoni do të duket kështu:

Dojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)

ÇfarĂ« do tĂ« mĂ«soni

Në këtë projekt shembull, do të mësoni se si të krijoni një faqe interneti të plotë duke përdorur Nuxt.js, nga konfigurimi fillestar deri në vendosjen përfundimtare.

Ai përfiton nga shumë nga veçoritë interesante që Nuxt ofron, të tilla si faqet dhe komponentët, dhe stilimi me SCSS.

Rafte dhe veçori teknike

  • Nuxt.js
  • KomponentĂ«t dhe Faqet
  • Moduli i bllokut tĂ« historisĂ«
  • Hagfish
  • Vuex pĂ«r menaxhimin e shtetit
  • SCSS pĂ«r stilim
  • Nuxt Middlewares

Ky është një projekt vërtet i lezetshëm, i cili përfshin shumë veçori të shkëlqyera të Nuxt.js. Unë personalisht më pëlqen të punoj me Nuxt, kështu që duhet ta provoni pasi do t'ju bëjë gjithashtu një zhvillues të shkëlqyeshëm të Vue.

Blog me Gatsby

Gatsby është një gjenerues i shkëlqyer i faqeve statike duke përdorur React dhe GraphQL. Ky është rezultati i projektit:

Dojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)

ÇfarĂ« do tĂ« mĂ«soni

Në këtë tutorial, do të mësoni se si të përdorni Gatsby për të krijuar një blog që do ta përdorni për të shkruar artikujt tuaj duke përdorur React dhe GraphQL.

Rafte dhe veçori teknike

  • gatsby
  • Reagoj
  • GrafikQL
  • Plugins dhe tema
  • MDX/Markdown
  • Bootstrap CSS
  • Shabllone

Nëse keni dashur ndonjëherë të hapni një blog, ky është një shembull i shkëlqyer se si ta bëni atë duke përdorur React dhe GraphQL.

Nuk po e them kĂ«tĂ« WordPress Ă«shtĂ« njĂ« zgjedhje e keqe, por me Gatsby mund tĂ« ndĂ«rtoni faqe interneti me performancĂ« tĂ« lartĂ« duke pĂ«rdorur React—qĂ« Ă«shtĂ« njĂ« kombinim i mrekullueshĂ«m.

Blog me Gridsome

Gridsome për Vue... Mirë, ne e kishim tashmë këtë me Next/Nuxt.
Por e njëjta gjë është e vërtetë për Gridsome dhe Gatsby. Të dy përdorin GraphQL si shtresën e tyre të të dhënave, por Gridsome përdor VueJS. Ky është gjithashtu një gjenerues i mahnitshëm i faqeve statike që do t'ju ndihmojë të krijoni blogje të shkëlqyera:

Dojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)

ÇfarĂ« do tĂ« mĂ«soni

Ky projekt do t'ju mësojë se si të krijoni një blog të thjeshtë për të filluar me Gridsome, GraphQL dhe Markdown. Ai gjithashtu mbulon mënyrën e vendosjes së një aplikacioni përmes Netlify.

Rafte dhe veçori teknike

  • E zymtĂ«
  • Vue
  • GrafikQL
  • Markdown
  • Netlify

Ky sigurisht nuk Ă«shtĂ« tutoriali mĂ« gjithĂ«pĂ«rfshirĂ«s, ​​por mbulon konceptet themelore tĂ« Gridsome dhe Markdown mund tĂ« jetĂ« njĂ« pikĂ«nisje e mirĂ«.

Riprodhuesi audio i ngjashëm me SoundCloud duke përdorur Quasar

Quasar është një tjetër kornizë Vue që mund të përdoret për të krijuar aplikacione celulare. Në këtë projekt ju do të krijoni një aplikacion audio player, për shembull:

Dojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)

ÇfarĂ« do tĂ« mĂ«soni

Ndërsa projektet e tjera fokusohen kryesisht në aplikacionet në ueb, ky do t'ju tregojë se si të krijoni një aplikacion celular duke përdorur Vue dhe kornizën Quasar.
Duhet të kesh tashmë një Cordova funksionale me të konfiguruar. Android Studio/Xcode. Nëse jo, udhëzuesi ka një lidhje për në faqen e internetit të Quasar ku tregojnë se si të konfiguroni gjithçka.

Rafte dhe veçori teknike

  • Quasar
  • Vue
  • Cordova
  • WaveSurfer
  • KomponentĂ«t UI

Projekt i vogël, duke demonstruar aftësitë e Quasar për krijimin e aplikacioneve celulare.

Formulari i kartës së kreditit

NjĂ« formĂ« e lezetshme e kartĂ«s sĂ« kreditit me mikro-ndĂ«rveprime tĂ« qetĂ« dhe tĂ« kĂ«ndshme. PĂ«rfshin formatimin e numrave, verifikimin dhe zbulimin automatik tĂ« llojit tĂ« kartĂ«s. ËshtĂ« ndĂ«rtuar nĂ« Vue.js dhe Ă«shtĂ« gjithashtu plotĂ«sisht e pĂ«rgjegjshme. (Ti mund te shohesh kĂ«tu.)

Dojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)

formulari i kartës së kreditit

ÇfarĂ« do tĂ« mĂ«soni:

  • PĂ«rpunoni dhe vĂ«rtetoni formularĂ«t
  • Trajtoni ngjarjet (pĂ«r shembull, kur ndryshojnĂ« fushat)
  • Kuptoni se si tĂ« shfaqni dhe vendosni elementĂ« nĂ« faqe, veçanĂ«risht informacionin e kartĂ«s sĂ« kreditit qĂ« shfaqet nĂ« krye tĂ« formularit

grafiku shtyllash

Një histogram është një grafik ose grafik që paraqet të dhëna kategorike me shufra drejtkëndëshe me lartësi ose gjatësi proporcionale me vlerat që ato përfaqësojnë.

Ato mund të aplikohen vertikalisht ose horizontalisht. Një grafik me shtylla vertikale nganjëherë quhet një tabelë vijash.

Dojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)

ÇfarĂ« do tĂ« mĂ«soni:

  • Shfaqni tĂ« dhĂ«nat nĂ« mĂ«nyrĂ« tĂ« strukturuar dhe tĂ« kuptueshme
  • PĂ«r mĂ« tepĂ«r: MĂ«soni se si tĂ« pĂ«rdorni elementin canvas dhe si tĂ« vizatohen elemente me tĂ«

Këtu mund të gjeni të dhëna për popullsinë botërore. Ato janë të renditura sipas vitit.

Animacioni i zemrës në Twitter

Në vitin 2016, Twitter prezantoi këtë animacion të mahnitshëm për tweet-et e tij. Që nga viti 2019, duket ende pjesa, kështu që pse të mos e krijoni vetë?

Dojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)
ÇfarĂ« do tĂ« mĂ«soni:

  • Punoni me atributin CSS keyframes
  • Manipuloni dhe animoni elementet HTML
  • Kombinoni JavaScript, HTML dhe CSS

Depot e GitHub të kërkueshme

Nuk ka asgjë të zbukuruar këtu - depot e GitHub janë thjesht një listë e lavdëruar.
Qëllimi është të shfaqni depot dhe t'i lejoni përdoruesit t'i filtrojë ato. Përdorni API zyrtare GitHub për të marrë depo për çdo përdorues.

Dojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)

Faqja e profilit të GitHub - github.com/indreklasn

ÇfarĂ« do tĂ« mĂ«soni:

Biseda në stilin Reddit

Bisedat janë një mënyrë e njohur komunikimi për shkak të thjeshtësisë dhe lehtësisë së përdorimit. Por çfarë i ushqen vërtet dhomat e bisedave moderne? WebSockets!

Dojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)

ÇfarĂ« do tĂ« mĂ«soni:

  • PĂ«rdorni WebSockets, komunikim nĂ« kohĂ« reale dhe pĂ«rditĂ«sime tĂ« tĂ« dhĂ«nave
  • Punoni me nivelet e aksesit tĂ« pĂ«rdoruesve (pĂ«r shembull, pronari i njĂ« kanali bisede ka rolin admin, dhe tĂ« tjerĂ«t nĂ« dhomĂ« - user)
  • PĂ«rpunoni dhe vĂ«rtetoni formularĂ«t - mbani mend, dritarja e bisedĂ«s pĂ«r dĂ«rgimin e njĂ« mesazhi Ă«shtĂ« input
  • Krijoni dhe bashkohuni nĂ« biseda tĂ« ndryshme
  • Punoni me mesazhe personale. PĂ«rdoruesit mund tĂ« bisedojnĂ« privatisht me pĂ«rdoruesit e tjerĂ«. NĂ« thelb, ju do tĂ« krijoni njĂ« lidhje WebSocket midis dy pĂ«rdoruesve.

Navigacion në stilin e shiritave

Ajo që e bën këtë navigim unik është se kontejneri popover transformohet për t'iu përshtatur përmbajtjes. Ky tranzicion ka një elegancë krahasuar me sjelljen tradicionale të hapjes dhe mbylljes së një popover të ri.

Dojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)

ÇfarĂ« do tĂ« mĂ«soni:

  • Kombinoni animacionet CSS me tranzicionet
  • Zbeh pĂ«rmbajtjen dhe apliko klasĂ«n aktive nĂ« elementin e lĂ«vizur

Pacman

Dojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)

Krijoni versionin tuaj të Pacman. Kjo është një mënyrë e shkëlqyer për të marrë një ide se si zhvillohen lojërat dhe për të kuptuar bazat. Përdorni një kornizë JavaScript, React ose Vue.

Ti do të mësosh:

  • Si lĂ«vizin elementĂ«t
  • Si tĂ« pĂ«rcaktoni se cilĂ«t taste tĂ« shtypni
  • Si tĂ« pĂ«rcaktohet momenti i pĂ«rplasjes
  • Mund tĂ« shkoni mĂ« tej dhe tĂ« shtoni kontrollet e lĂ«vizjes sĂ« fantazmave

Ju do të gjeni një shembull të këtij projekti në depo GitHub

menaxhimi i përdoruesit

Dojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)

Projekt në depo GitHub

Krijimi i një aplikacioni të tipit CRUD për administrimin e përdoruesit do t'ju mësojë bazat e zhvillimit. Kjo është veçanërisht e dobishme për zhvilluesit e rinj.

Ti do të mësosh:

  • ÇfarĂ« Ă«shtĂ« rrugĂ«timi
  • Si tĂ« trajtoni formularĂ«t e futjes sĂ« tĂ« dhĂ«nave dhe tĂ« kontrolloni se çfarĂ« ka futur pĂ«rdoruesi
  • Si tĂ« punoni me bazĂ«n e tĂ« dhĂ«nave - krijoni, lexoni, pĂ«rditĂ«soni dhe fshini veprime

Kontrollimi i motit në vendndodhjen tuaj

Dojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)
Projekt në depo GitHub

Nëse dëshironi të krijoni aplikacione, filloni me një aplikacion moti. Ky projekt mund të kryhet duke përdorur Swift.

Përveç fitimit të përvojës në ndërtimin e një aplikacioni, do të mësoni:

  • Si tĂ« punoni me API
  • Si tĂ« pĂ«rdorni vendndodhjen gjeografike
  • BĂ«jeni aplikacionin tuaj mĂ« dinamik duke shtuar futjen e tekstit. NĂ« tĂ«, pĂ«rdoruesit do tĂ« mund tĂ« fusin vendndodhjen e tyre pĂ«r tĂ« kontrolluar motin nĂ« njĂ« vend tĂ« caktuar.

Do t'ju duhet një API. Për të marrë të dhënat e motit, përdorni OpenWeather API. Më shumë informacion rreth OpenWeather API këtu.

Dritarja e bisedës

Dojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)
Dritarja ime e bisedës në veprim, hapet në dy skeda të shfletuesit

Krijimi i një dritareje bisede është mënyra e përsosur për të filluar me bazat. Zgjedhja e grupit të teknologjisë është e madhe. Node.js, për shembull, është perfekt.

Do të mësoni se si funksionojnë prizat dhe si t'i zbatoni ato. Ky është avantazhi kryesor i këtij projekti.

Nëse jeni një zhvillues i Laravel që dëshiron të punojë me bazat, lexoni timin një artikull

GitLab CI

Dojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)

Burim

Nëse jeni i ri në integrimin e vazhdueshëm (CI), luani me GitLab CI. Vendosni disa mjedise dhe provoni të kryeni disa teste. Nuk është një projekt shumë i vështirë, por jam i sigurt se do të mësoni shumë prej tij. Shumë ekipe zhvillimi po përdorin tani CI. Të dish se si ta përdorësh është e dobishme.

Ti do të mësosh:

  • ÇfarĂ« Ă«shtĂ« GitLab CI
  • Si tĂ« konfiguroni .gitlab-ci.ymli cili i tregon pĂ«rdoruesit GitLab se çfarĂ« tĂ« bĂ«jĂ«
  • Si tĂ« vendoset nĂ« mjedise tĂ« tjera

Analizues i faqes në internet

Dojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)

Bëni një kruese që analizon semantikën e faqeve të internetit dhe krijon vlerësimin e tyre. Për shembull, mund të kontrolloni nëse mungojnë etiketat alt në imazhe. Ose kontrolloni nëse faqja ka meta etiketa SEO. Një kruese mund të krijohet pa një ndërfaqe përdoruesi.

Ti do të mësosh:

  • Si funksionon kruese?
  • Si tĂ« krijoni pĂ«rzgjedhĂ«s DOM
  • Si tĂ« shkruani njĂ« algoritĂ«m
  • NĂ«se nuk doni tĂ« ndaleni kĂ«tu, krijoni njĂ« ndĂ«rfaqe pĂ«rdoruesi. Ju gjithashtu mund tĂ« krijoni njĂ« raport nĂ« çdo faqe interneti qĂ« kontrolloni.

Zbulimi i ndjenjave në rrjetet sociale

Dojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)

Burim

Zbulimi i ndjenjave në mediat sociale është një mënyrë e shkëlqyer për t'u njohur me mësimin e makinerive.

Mund të filloni duke analizuar vetëm një rrjet social. Të gjithë zakonisht fillojnë me Twitter.

Nëse tashmë keni përvojë me mësimin e makinerive, provoni të mbledhni të dhëna nga rrjete të ndryshme sociale dhe t'i kombinoni ato.

Ti do të mësosh:

  • ÇfarĂ« Ă«shtĂ« mĂ«simi i makinĂ«s

Klon Trello

Dojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)

Klon Trello nga Indrek Lasn.

ÇfarĂ« do tĂ« mĂ«soni:

  • Organizimi i rrugĂ«ve tĂ« pĂ«rpunimit tĂ« kĂ«rkesave (Routing).
  • TĂ«rhiq dhe lĂ«sho.
  • Si tĂ« krijoni objekte tĂ« reja (dĂ«rrasa, lista, karta).
  • PĂ«rpunimi dhe kontrollimi i tĂ« dhĂ«nave hyrĂ«se.
  • Nga ana e klientit: si tĂ« pĂ«rdorni ruajtjen lokale, si tĂ« ruani tĂ« dhĂ«nat nĂ« ruajtjen lokale, si tĂ« lexoni tĂ« dhĂ«na nga ruajtja lokale.
  • Nga ana e serverit: si tĂ« pĂ«rdoren bazat e tĂ« dhĂ«nave, si tĂ« ruhen tĂ« dhĂ«nat nĂ« bazĂ«n e tĂ« dhĂ«nave, si tĂ« lexohen tĂ« dhĂ«nat nga baza e tĂ« dhĂ«nave.

Këtu është një shembull i një depoje, bërë në React+Redux.

Paneli i administratorit

Dojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)
Depoja e Github.

Një aplikacion i thjeshtë CRUD, ideal për të mësuar bazat. Le të mësojmë:

  • Krijoni pĂ«rdorues, menaxhoni pĂ«rdoruesit.
  • NdĂ«rveproni me bazĂ«n e tĂ« dhĂ«nave - krijoni, lexoni, modifikoni, fshini pĂ«rdoruesit.
  • VĂ«rtetimi i tĂ« dhĂ«nave dhe puna me formularĂ«t.

Gjurmuesi i kriptomonedhës (aplikacioni vendas celular)

Dojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)
Depoja e Github.

Çdo gjĂ«: Swift, Objective-C, React Native, Java, Kotlin.

Le të mësojmë:

  • Si funksionojnĂ« aplikacionet vendase.
  • Si tĂ« merrni tĂ« dhĂ«na nga API.
  • Si funksionojnĂ« paraqitjet e faqeve vendase.
  • Si tĂ« punoni me simulatorĂ«t celularĂ«.

Provo këtë API. Nëse gjeni diçka më të mirë, shkruani në komente.

Nëse jeni të interesuar, ja ku është këtu është një tutorial.

Vendosni konfigurimin tuaj të paketës së internetit nga e para

Dojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)
Teknikisht, ky nuk është një aplikacion, por është një detyrë shumë e dobishme për të kuptuar se si funksionon paketa e uebit nga brenda. Tani nuk do të jetë një "kuti e zezë", por një mjet i kuptueshëm.

kërkesat:

  • PĂ«rpiloni es7 nĂ« es5 (bazat).
  • PĂ«rpiloni jsx nĂ« js — or - .vue nĂ« .js (ju duhet tĂ« mĂ«soni ngarkuesit)
  • Konfiguro serverin e zhvilluesit tĂ« paketĂ«s sĂ« uebit dhe rimbushjen e modulit tĂ« nxehtĂ«. (vue-cli dhe create-react-app pĂ«rdorin tĂ« dyja)
  • PĂ«rdorni Heroku, now.sh ose Github, mĂ«soni se si tĂ« vendosni projektet e paketĂ«s sĂ« internetit.
  • Vendosni paraprocesorin tuaj tĂ« preferuar pĂ«r tĂ« pĂ«rpiluar css - scss, mĂ« pak, majĂ« shkruese.
  • MĂ«soni se si tĂ« pĂ«rdorni imazhe dhe svgs me uebpack.

Ky është një burim i mahnitshëm për fillestarët e plotë.

Klon Hackernews

Dojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)
Çdo Jedi kĂ«rkohet tĂ« bĂ«jĂ« Hackernews-in e tij.

ÇfarĂ« do tĂ« mĂ«soni gjatĂ« rrugĂ«s:

  • Si tĂ« ndĂ«rveproni me Hackernews API.
  • Si tĂ« krijoni njĂ« aplikacion me njĂ« faqe tĂ« vetme.
  • Si tĂ« zbatoni veçori tĂ« tilla si shikimi i komenteve, komentet individuale, profilet.
  • Organizimi i rrugĂ«ve tĂ« pĂ«rpunimit tĂ« kĂ«rkesave (Routing).

Tudushechka

Dojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)
TodoMVC.

Seriozisht? Tudushka? Janë me mijëra të tillë. Por më besoni, ka një arsye për këtë popullaritet.
Aplikacioni Tudu është një mënyrë e shkëlqyer për t'u siguruar që i kuptoni bazat. Provoni të shkruani një aplikacion në vanilje Javascript dhe një në kornizën tuaj të preferuar.

MĂ«soni:

  • Krijoni detyra tĂ« reja.
  • Kontrolloni qĂ« fushat tĂ« jenĂ« tĂ« mbushura.
  • Detyrat e filtrit (tĂ« pĂ«rfunduara, aktive, tĂ« gjitha). PĂ«rdorni filter Đž reduce.
  • Kuptoni bazat e Javascript.

Lista e klasifikueshme tërhiq dhe lësho

Dojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)
Depoja e Github.

Shumë e dobishme për të kuptuar zvarrit dhe lësho api.

Le të mësojmë:

  • Zvarrit dhe lĂ«sho API-nĂ«
  • Krijoni UI tĂ« pasura

Klon i Messenger-it (aplikacioni vendas)

Dojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)
Do të kuptoni se si funksionojnë aplikacionet në ueb dhe aplikacionet vendase, gjë që do t'ju veçojë nga masa gri.

ÇfarĂ« do tĂ« studiojmĂ«:

  • Prizat nĂ« ueb (mesazhe tĂ« çastit)
  • Si funksionojnĂ« aplikacionet vendase.
  • Si funksionojnĂ« shabllonet nĂ« aplikacionet vendase.
  • Organizimi i rrugĂ«ve tĂ« pĂ«rpunimit tĂ« kĂ«rkesave nĂ« aplikacionet vendase.

Redaktuesi i tekstit

Dojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)

Qëllimi i një redaktuesi teksti është të zvogëlojë përpjekjet e përdoruesve që përpiqen të konvertojnë formatimin e tyre në shënjimin e vlefshëm HTML. Një redaktues i mirë teksti i lejon përdoruesit të formatojnë tekstin në mënyra të ndryshme.

Në një moment, të gjithë kanë përdorur një redaktues teksti. Pra pse jo krijoni vetë?

Klon Reddit

Dojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)

Reddit është një grumbullim i lajmeve sociale, vlerësim i përmbajtjes në ueb dhe faqe diskutimi.

Reddit më merr pjesën më të madhe të kohës, por unë vazhdoj të qëndroj me të. Krijimi i një kloni Reddit është një mënyrë efektive për të mësuar programimin (ndërsa shfletoni Reddit në të njëjtën kohë).

Reddit ju ofron një shumë të pasur API. Mos lini jashtë asnjë veçori ose mos bëni gjëra në mënyrë të rastësishme. Në botën reale me klientët dhe klientët, ju nuk mund të punoni në mënyrë të rastësishme, ose do të humbni shpejt punën tuaj.

Klientët e zgjuar do të kuptojnë menjëherë se puna po bëhet keq dhe do të gjejnë dikë tjetër.

Dojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)

Reddit API

Publikimi i një pakete NPM me burim të hapur

Dojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)

Nëse shkruani kodin Javascript, shanset janë që të përdorni një menaxher paketash. Një menaxher paketash ju lejon të ripërdorni kodin ekzistues që njerëzit e tjerë kanë shkruar dhe publikuar.

Të kuptuarit e ciklit të plotë të zhvillimit të një pakete do të sigurojë një përvojë shumë të mirë. Ka shumë gjëra që duhet të dini kur publikoni kodin. Ju duhet të mendoni për sigurinë, versionimin semantik, shkallëzueshmërinë, konventat e emërtimit dhe mirëmbajtjen.

Paketa mund të jetë çdo gjë. Nëse nuk keni një ide, krijoni Lodash-in tuaj dhe publikojeni.

Dojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)

Lodash: lodash.com

Të kesh diçka që ke bërë në internet, të vendos 10% mbi të tjerët. Këtu janë disa burime të dobishme rreth burimeve dhe paketave të hapura.

Programi mësimor freeCodeCamp

Dojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)

Kurrikula e FCC

freeCodecamp ka mbledhur shumë kurs programimi gjithëpërfshirës.

freeCodeCamp është një organizatë jofitimprurëse. Ai përbëhet nga një platformë mësimore interaktive e bazuar në ueb, një forum i komunitetit në internet, dhoma bisede, publikime të mesme dhe organizata lokale që synojnë ta bëjnë zhvillimin e të mësuarit të ueb-it të arritshëm për të gjithë.

Dojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)

Do të jeni më se të kualifikuar për punën tuaj të parë nëse arrini të përfundoni të gjithë kursin.

Krijoni një server HTTP nga e para

Protokolli HTTP është një nga protokollet kryesore përmes të cilit përmbajtja udhëton në internet. Serverët HTTP përdoren për të shërbyer përmbajtje statike si HTML, CSS dhe JS.

Të qenit në gjendje të zbatoni protokollin HTTP nga e para do të zgjerojë njohuritë tuaja se si gjërat ndërveprojnë.

Për shembull, nëse përdorni NodeJs, atëherë e dini që Express ofron një server HTTP.

Për referencë, shikoni nëse mundeni:

  • Vendosni njĂ« server pa pĂ«rdorur asnjĂ« bibliotekĂ«
  • Serveri duhet tĂ« shĂ«rbejĂ« pĂ«rmbajtje HTML, CSS dhe JS.
  • Zbatimi i njĂ« ruteri nga e para
  • Monitoroni ndryshimet dhe pĂ«rditĂ«soni serverin

Nëse nuk e dini pse, përdorni Shkoni në gjumë dhe përpiquni të krijoni një server HTTP Kuti çaji nga e para.

Dojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)

Aplikacioni i desktopit për shënime

Dojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)

Të gjithë mbajmë shënime, apo jo?

Le të krijojmë një aplikacion shënimesh. Aplikacioni duhet të ruajë shënime dhe t'i sinkronizojë ato me bazën e të dhënave. Ndërtoni një aplikacion vendas duke përdorur Electron, Swift ose çfarëdo që ju pëlqen dhe çfarë funksionon për sistemin tuaj.

Mos ngurroni ta kombinoni këtë me sfidën e parë (redaktori i tekstit).

Si bonus, provo të sinkronizosh versionin e desktopit me versionin e uebit.

Podkastet (klon me re)

Dojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)

Kush nuk i dëgjon podkastet?

Krijoni një aplikacion në internet me funksionalitetin e mëposhtëm:

  • Krijo nje llogari
  • KĂ«rko Podkastet
  • VlerĂ«soni dhe abonohuni nĂ« podkaste
  • Ndaloni dhe luani, ndryshoni shpejtĂ«sinĂ«, funksionet pĂ«rpara dhe prapa pĂ«r 30 sekonda.

Provoni të përdorni iTunes API si pikënisje. Nëse dini për ndonjë burim tjetër, ju lutemi postoni në komente.

Dojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)

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

Kapja e ekranit

Dojo e përparme: projekte për të trajnuar aftësitë e zhvilluesve (5 të reja + 43 të vjetra)

Përshëndetje! Unë jam duke filmuar ekranin tim tani!

Krijoni një aplikacion desktopi ose ueb që ju lejon të kapni ekranin tuaj dhe ta ruani klipin si .gif

Këtu disa keshillasi të arrihet kjo.

burime

Burimi: www.habr.com

Bleni njĂ« host tĂ« besueshĂ«m pĂ«r faqet me mbrojtje DDoS, serverĂ« VPS VDS đŸ”„ Bleni hosting tĂ« besueshĂ«m tĂ« faqeve tĂ« internetit me mbrojtje DDoS, servera VPS VDS | ProHoster