{"id":52348,"date":"2019-11-06T00:00:00","date_gmt":"2019-11-05T21:00:00","guid":{"rendered":"https:\/\/prohoster.info\/blog\/blog_prohoster\/eshhyo-9-proektov-dlya-ottachivaniya-front-end-masterstva"},"modified":"2020-02-18T14:00:02","modified_gmt":"2020-02-18T11:00:02","slug":"eshhyo-9-proektov-dlya-ottachivaniya-front-end-masterstva","status":"publish","type":"post","link":"https:\/\/prohoster.info\/et\/blog\/novosti-interneta\/eshhyo-9-proektov-dlya-ottachivaniya-front-end-masterstva","title":{"rendered":"Veel 9 projekti teie Front-End oskuste lihvimiseks","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"<p><img decoding=\"async\" alt=\"Veel 9 projekti teie Front-End oskuste lihvimiseks\" src=\"\/wp-content\/uploads\/2019\/11\/05c3246e5ca620b5ea66c0542b53f08a.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<\/p>\n<h3>Sissejuhatus<\/h3>\n<p>\nOlenemata sellest, kas olete programmeerimise algaja v\u00f5i juba kogenud arendaja, on sellel alal uute kontseptsioonide ja keelte\/framework'ide \u00f5ppimine h\u00e4davajalik, et trendidega sammu pidada.<\/p>\n<p>V\u00f5tame n\u00e4iteks React'i \u2014 kood, mille Facebook avaldas ainult neli aastat tagasi, on juba saanud number \u00fcks valikuks JavaScript arendajate seas \u00fcle kogu maailma.<\/p>\n<p>Vue ja Angular, muidugi, omavad samuti oma \u00f5igustatud f\u00e4nnibaasi. Ja siis on veel Svelte ja teised universaalsed raamistikud nagu Next.js v\u00f5i Nuxt.js. Ja Gatsby, Gridsome, Quasar\u2026 ja palju muud.<\/p>\n<p>Kui soovite end t\u00f5estada kui kogenud JavaScript arendaja, peate omama v\u00e4hemalt m\u00f5ningast kogemust erinevate raamistikute ja raamatukogudega \u2014 peale hea vana JS-i tegemise.<\/p>\n<p>Ettevalmistamiseks, et saada 2020. aastal esmaklassiliseks front-end arendajaks, olen kokku kogunud \u00fcheksa erinevat projekti, millest iga\u00fcks k\u00e4sitleb erinevaid JavaScripti raamistikke ja \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, mida saate luua ja oma portfelli lisada. Pea meeles, et \u00fckski asi ei aita sind rohkem kui praktikas asjade loomine, seega liigu edasi, l\u00fclita oma m\u00f5istus sisse ja tee see v\u00f5imalikuks.<br \/>\n<noindex><a rel=\"nofollow\" name=\"habracut\"><\/a><\/noindex><\/p>\n<blockquote><p><noindex><a rel=\"nofollow\" href=\"https:\/\/www.edsd.ru\/\" title=\"EDISON Software - veebiarendus\"><img decoding=\"async\" alt=\"Veel 9 projekti teie Front-End oskuste lihvimiseks\" src=\"\/wp-content\/uploads\/2019\/11\/4f292db7c47eaa9d6e764f5a595d0edf.jpeg\" style=\"display:block;margin: 0 auto;\" \/><\/a><\/noindex><br clear=\"right\"><br \/>\nArtikkel on t\u00f5lgitud EDISON Software'i toetusel, kes <noindex><a rel=\"nofollow\" href=\"https:\/\/www.edsd.ru\/virtualnaya-primerochnaya\">loob virtuaalseid prooviruumid mitme br\u00e4ndi kauplustele<\/a><\/noindex>, samuti <noindex><a rel=\"nofollow\" href=\"https:\/\/www.edsd.ru\/ru\/uslugi\/testirovanie_po\">katsetab tarkvara<\/a><\/noindex>.<\/p><\/blockquote>\n<p><\/p>\n<h3>Filmiotsingu rakendus Reacti abil (hook'idega)<\/h3>\n<p>\nEsimene asi, millega v\u00f5iks alustada, on luua filmiotsingu rakendus Reacti abil. Allpool on pilt, milline n\u00e4eb v\u00e4lja l\u00f5plik rakendus:<\/p>\n<p><img decoding=\"async\" alt=\"Veel 9 projekti teie Front-End oskuste lihvimiseks\" src=\"\/wp-content\/uploads\/2019\/11\/de9873700abc86e1ec63e92704f80dcf.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Mida sa \u00f5pid<\/b><br \/>\nSeda rakendust luues parendad oma Reacti oskusi, kasutades suhteliselt uut API-d Hooks. Projekti n\u00e4ites kasutatakse Reacti komponente, mitmeid hook'e, v\u00e4list API-t ja loomulikult ka m\u00f5ningaid CSS-i stiile.<\/p>\n<p><b>Tehniline stek ja funktsioonid<\/b><\/p>\n<ul>\n<li>React koos hook'idega<\/li>\n<li>create-react-app<\/li>\n<li>JSX<\/li>\n<li>CSS<\/li>\n<\/ul>\n<p>\nIlma klasside kasutamiseta pakuvad need projektid ideaalset sissejuhatust funktsionaalsesse Reacti ning aitavad teid kindlasti 2020. aastal. Leiate <noindex><a rel=\"nofollow\" href=\"https:\/\/www.freecodecamp.org\/news\/how-to-build-a-movie-search-app-using-react-hooks-24eb72ddfaf7\/\">projekti n\u00e4ite siit<\/a><\/noindex>. J\u00e4rgige juhiseid v\u00f5i tehke k\u00f5ik oma maitse j\u00e4rgi.<\/p>\n<h3>Vestlusrakendus Vue abil<\/h3>\n<p>\nTeine suurep\u00e4rane projekt teile on vestlusrakenduse loomine, kasutades minu lemmik JavaScripti teeki: VueJS. Rakendus n\u00e4eb v\u00e4lja umbes selline:<\/p>\n<p><img decoding=\"async\" alt=\"Veel 9 projekti teie Front-End oskuste lihvimiseks\" src=\"\/wp-content\/uploads\/2019\/11\/3c55136bcf260168f951e923983dc3a0.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Mida sa \u00f5pid<\/b><br \/>\nSelles juhendis \u00f5pite, kuidas luua Vue rakendust nullist \u2014 luua komponente, hallata olekuid, luua marsruute, \u00fchendada kolmandate osapoolte teenustega ja isegi hallata autentimist.<\/p>\n<p><b>Tehniline stek ja funktsioonid<\/b><\/p>\n<ul>\n<li>Vue<\/li>\n<li>Vuex<\/li>\n<li>Vue Router<\/li>\n<li>Vue CLI<\/li>\n<li>Pusher<\/li>\n<li>CSS<\/li>\n<\/ul>\n<p>\nSee on t\u00f5eliselt suurep\u00e4rane projekt, et alustada Vue'ga v\u00f5i t\u00e4iustada oma olemasolevaid oskusi 2020. aastal. Leiate <noindex><a rel=\"nofollow\" href=\"https:\/\/www.sitepoint.com\/pusher-vue-real-time-chat-app\/\">\u00f5petuse siit<\/a><\/noindex>.<\/p>\n<h3>Kaunis ilmaprognoosi rakendus Angular 8 abil<\/h3>\n<p>\nSee n\u00e4ide aitab teil luua kauni ilmaprognoosi rakenduse Angular 8 abil:<\/p>\n<p><img decoding=\"async\" alt=\"Veel 9 projekti teie Front-End oskuste lihvimiseks\" src=\"\/wp-content\/uploads\/2019\/11\/93575fb69c667f04a00c58bfeb8b9699.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Mida sa \u00f5pid<\/b><br \/>\nSee projekt \u00f5petab teid v\u00e4\u00e4rtuslikke oskusi rakenduste loomiseks nullist - alates projekteerimisest kuni arendamise ja l\u00f5puks juurutatava rakenduseni.<\/p>\n<p><b>Tehniline stek ja funktsioonid<\/b><\/p>\n<ul>\n<li>Angular 8<\/li>\n<li>Firebase<\/li>\n<li>Serveripoolne renderdamine<\/li>\n<li>CSS v\u00f5rgu ja Flexboxiga<\/li>\n<li>Mobiilis\u00f5bralik ja reageeriv<\/li>\n<li>Tumedat re\u017eiimi<\/li>\n<li>Kaunis liides<\/li>\n<\/ul>\n<p>\nMis mulle selles k\u00f5ikeh\u00f5lmavas projektis t\u00f5eliselt meeldib, on see, et te ei \u00f5pi asju eraldi. Selle asemel \u00f5pite kogu arendusprotsessi - projekteerimisest kuni l\u00f5pliku juurutamiseni.<\/p>\n<h3>To-Do rakendus Svelte abil<\/h3>\n<p>\nSvelte on nagu uus laps komponentide l\u00e4henemises - v\u00e4hemalt sarnane Reactile, Vue'le ja Angularile. Ja see on \u00fcks kuumimaid uuendusi 2020. aastal.<\/p>\n<p>To-Do rakendused ei pruugi olla k\u00f5ige kuumem teema, kuid see aitab t\u00f5eliselt teravdada teie Svelte oskusi. See n\u00e4eb v\u00e4lja selline:<\/p>\n<p><img decoding=\"async\" alt=\"Veel 9 projekti teie Front-End oskuste lihvimiseks\" src=\"\/wp-content\/uploads\/2019\/11\/1d2d414f5acbb3cfd0df5bf7ff29befd.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Mida sa \u00f5pid<\/b><br \/>\nSelle \u00f5petuse k\u00e4igus \u00f5pite, kuidas luua rakendus Svelte 3 abil, algusest l\u00f5puni. Kasutate komponente, stiliseerimist ja s\u00fcndmuste k\u00e4sitlemist.<\/p>\n<p><b>Tehniline stek ja funktsioonid<\/b><\/p>\n<ul>\n<li>Svelte 3<\/li>\n<li>Komponendid<\/li>\n<li>Stiliseerimine CSS abil<\/li>\n<li>ES 6 s\u00fcntaks<\/li>\n<\/ul>\n<p>\nHeade alustavate projektide osas Svelte\u2019is ei ole palju valikuid, seet\u00f5ttu leidsin <noindex><a rel=\"nofollow\" href=\"https:\/\/medium.com\/codingthesmartway-com-blog\/building-a-svelte-3-todo-app-from-start-to-deployment-1737f72c23a6\">see on hea valik alustamiseks<\/a><\/noindex>.<\/p>\n<h3>\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u043e\u0439 \u043a\u043e\u043c\u043c\u0435\u0440\u0446\u0438\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Next.js<\/h3>\n<p>\nNext.js on k\u00f5ige populaarsem raamistik React-rakenduste loomiseks, mis toetavad serveripoolset renderdust kohe v\u00e4lja kastist.<\/p>\n<p>See projekt n\u00e4itab teile, kuidas luua e-kaubanduse rakendus, mis n\u00e4eb v\u00e4lja j\u00e4rgmiselt:<\/p>\n<p><img decoding=\"async\" alt=\"Veel 9 projekti teie Front-End oskuste lihvimiseks\" src=\"\/wp-content\/uploads\/2019\/11\/a848293ad9952a3c52bf8d059bf55ab9.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Mida sa \u00f5pid<\/b><br \/>\nSelles projektis \u00f5pite arendama Next.js-i abil \u2014 looma uusi lehti ja komponente, andmeid hankima ning rakendust Next stiilima ja juurutama.<\/p>\n<p><b>Tehniline stek ja funktsioonid<\/b><\/p>\n<ul>\n<li>Next.js<\/li>\n<li>Komponendid ja lehed<\/li>\n<li>Andmete hankimine<\/li>\n<li>Stiilimine<\/li>\n<li>Projekti juurutamine<\/li>\n<li>SSR ja SPA<\/li>\n<\/ul>\n<p>\nReaalne n\u00e4ide, n\u00e4iteks e-kaubanduse rakendus, on alati suurep\u00e4rane v\u00f5imalus midagi uut \u00f5ppida. Saate <noindex><a rel=\"nofollow\" href=\"https:\/\/snipcart.com\/blog\/next-js-ecommerce-tutorial\">tutoriali siit leida<\/a><\/noindex>.<\/p>\n<h3>\u041f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0439 \u043c\u0443\u043b\u044c\u0442\u0438\u044f\u0437\u044b\u0447\u043d\u044b\u0439 \u0431\u043b\u043e\u0433 \u0441 Nuxt.js<\/h3>\n<p>\nNuxt.js Vue jaoks on sama mis Next.js React jaoks: suurep\u00e4rane raamistik, mis \u00fchendab serveripoolse renderdamise ja \u00fchekorraga rakenduste v\u00f5imalused.<br \/>\nViimane rakendus, mille saate luua, n\u00e4eb v\u00e4lja j\u00e4rgmiselt:<\/p>\n<p><img decoding=\"async\" alt=\"Veel 9 projekti teie Front-End oskuste lihvimiseks\" src=\"\/wp-content\/uploads\/2019\/11\/ba05c24c81705c454c32d363e9a74fe5.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Mida sa \u00f5pid<\/b><\/p>\n<p>Selles projekti n\u00e4ites saate teada, kuidas luua t\u00e4ielik veebisait Nuxt.js abil \u2014 alates esialgsest seadistamisest kuni l\u00f5pp-juurutamiseni.<\/p>\n<p>See kasutab mitmeid huvitavaid funktsioone, mida Nuxt pakub, n\u00e4iteks lehed ja komponendid ning ka stiilide tegemine SCSS-i abil.<\/p>\n<p><b>Tehniline stek ja funktsioonid<\/b><\/p>\n<ul>\n<li>Nuxt.js<\/li>\n<li>Komponendid ja lehed<\/li>\n<li>Storyblock moodul<\/li>\n<li>Mixini<\/li>\n<li>Vuex oleku haldamiseks<\/li>\n<li>SCSS stiilimiseks<\/li>\n<li>Nuxti vahendused<\/li>\n<\/ul>\n<p>\n<noindex><a rel=\"nofollow\" href=\"https:\/\/www.storyblok.com\/tp\/nuxt-js-multilanguage-website-tutorial\">See on t\u00f5eliselt \u00e4ge projekt<\/a><\/noindex>, mis sisaldab palju suurep\u00e4raseid v\u00f5imalusi Nuxt.js-i jaoks. Mulle isiklikult meeldib Nuxtiga t\u00f6\u00f6tada, nii et tasub kindlasti proovida, kuna see teeb teid ka suurep\u00e4raseks Vue arendajaks.<\/p>\n<h3>Blogi Gatsbyga<\/h3>\n<p>\nGatsby on suurep\u00e4rane staatiliste veebilehtede generaator, mis kasutab Reacti ja GraphQL-i. See on projekti tulemus:<\/p>\n<p><img decoding=\"async\" alt=\"Veel 9 projekti teie Front-End oskuste lihvimiseks\" src=\"\/wp-content\/uploads\/2019\/11\/4a51e59e1983da87d2110f8b06e29e33.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Mida sa \u00f5pid<\/b><\/p>\n<p>Selles juhendis \u00f5pite, kuidas kasutada Gatsby-d, et luua blogi, mida saate kasutada oma artiklite kirjutamiseks, kasutades Reacti ja GraphQL-i.<\/p>\n<p><b>Tehniline stek ja funktsioonid<\/b><\/p>\n<ul>\n<li>Gatsby<\/li>\n<li>React<\/li>\n<li>GraphQL<\/li>\n<li>Pluginad ja teemad<\/li>\n<li>MDX\/Markdown<\/li>\n<li>Bootstrap CSS<\/li>\n<li>Mallid<\/li>\n<\/ul>\n<p>\nKui olete kunagi soovinud alustada blogi, <noindex><a rel=\"nofollow\" href=\"https:\/\/blog.bitsrc.io\/how-to-build-a-blog-with-gatsby-and-boostrap-d1270212b3dc\">siis on see suurep\u00e4rane n\u00e4ide<\/a><\/noindex> kuidas seda teha, kasutades Reacti ja GraphQL-i.<\/p>\n<p>Ma ei \u00fctle, et WordPress on halb valik, kuid Gatsby abil saate luua k\u00f5rgtasemel veebilehti, kasutades Reacti \u2014 mis on h\u00e4mmastav kombinatsioon.<\/p>\n<h3>Blogi Gridsome'iga<\/h3>\n<p>\nGridsome Vue jaoks... H\u00e4sti, meil on see juba olnud Next\/Nuxtiga.<br \/>\nAga sama kehtib ka Gridsome'i ja Gatsby kohta. M\u00f5lemad kasutavad GraphQL-i andmestruktuurina, kuid Gridsome kasutab VueJS-i. See on samuti suurep\u00e4rane staatiliste veebilehtede genereerija, mis aitab teil luua suurep\u00e4raseid blogisid:<\/p>\n<p><img decoding=\"async\" alt=\"Veel 9 projekti teie Front-End oskuste lihvimiseks\" src=\"\/wp-content\/uploads\/2019\/11\/3d0162d6aeba8481056f4dee9f25808d.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Mida sa \u00f5pid<\/b><\/p>\n<p>See projekt \u00f5petab teid, kuidas luua lihtne blogi, et alustada Gridsome'i, GraphQL-i ja Markdowniga. Samuti selgitatakse, kuidas rakendust Netlify kaudu k\u00e4ivitada.<\/p>\n<p><b>Tehniline stek ja funktsioonid<\/b><\/p>\n<ul>\n<li>Gridsome<\/li>\n<li>Vue<\/li>\n<li>GraphQL<\/li>\n<li>Markdown<\/li>\n<li>Netlify<\/li>\n<\/ul>\n<p>\nSee ei ole muidugi k\u00f5ige t\u00e4ielikum juhend, kuid see katab Gridsome'i peamised kontseptsioonid ja <noindex><a rel=\"nofollow\" href=\"https:\/\/www.telerik.com\/blogs\/building-a-blog-with-vue-and-markdown-using-gridsome\">Markdown ja v\u00f5ib olla hea l\u00e4htepunkt.<\/a><\/noindex>.<\/p>\n<h3>Audio m\u00e4ngija, mis sarnaneb SoundCloudiga, Quasari abil.<\/h3>\n<p>\nQuasar on veel \u00fcks Vue raamistik, mida saab kasutada mobiilirakenduste loomisel. Selles projektis loote audio-m\u00e4ngija rakenduse, n\u00e4iteks:<\/p>\n<p><img decoding=\"async\" alt=\"Veel 9 projekti teie Front-End oskuste lihvimiseks\" src=\"\/wp-content\/uploads\/2019\/11\/e7acef4f60608d581533c038c61a0752.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Mida sa \u00f5pid<\/b><\/p>\n<p>Kui teised projektid keskenduvad peamiselt veebirakendustele, siis see n\u00e4itab teile, kuidas luua mobiilirakendus Vue ja Quasari raamistikuga.<br \/>\nTeil peaks juba olema t\u00f6\u00f6tav Cordova koos seadistatud Android Studio\/Xcode'iga. Kui ei, siis on juhendis link Quasari veebisaidile, kus nad n\u00e4itavad, kuidas k\u00f5ik seadistada.<\/p>\n<p><b>Tehniline stek ja funktsioonid<\/b><\/p>\n<ul>\n<li>Quasar<\/li>\n<li>Vue<\/li>\n<li>Cordova<\/li>\n<li>WaveSurfer<\/li>\n<li>UI Komponendid<\/li>\n<\/ul>\n<p>\n<noindex><a rel=\"nofollow\" href=\"https:\/\/www.learningsomethingnew.com\/how-to-build-a-sound-cloud-like-audio-player-app-with-vue-js-quasar-and-wave-surfer\">V\u00e4ike projekt<\/a><\/noindex>, tutvustades Quasari v\u00f5imalusi mobiilirakenduste arendamiseks.<br \/>\n<br \/>Allikas: <a content=\"nofollow\" rel=\"nofollow\" href=\"https:\/\/habr.com\/ru\/company\/edison\/blog\/474230\/\">habr.com<\/a><\/p>","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"excerpt":{"rendered":"<p>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u041d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u0442\u043e\u0433\u043e, \u044f\u0432\u043b\u044f\u0435\u0442\u0435\u0441\u044c \u043b\u0438 \u0432\u044b \u043d\u043e\u0432\u0438\u0447\u043a\u043e\u043c \u0432 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0438\u043b\u0438 \u0443\u0436\u0435 \u043e\u043f\u044b\u0442\u043d\u044b\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u043c, \u0432 \u044d\u0442\u043e\u0439 \u043e\u0442\u0440\u0430\u0441\u043b\u0438 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435 \u043d\u043e\u0432\u044b\u0445 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0439 \u0438 \u044f\u0437\u044b\u043a\u043e\u0432\/\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0447\u0442\u043e\u0431\u044b \u0443\u0441\u043f\u0435\u0432\u0430\u0442\u044c \u0437\u0430 \u0442\u0440\u0435\u043d\u0434\u0430\u043c\u0438. \u0412\u043e\u0437\u044c\u043c\u0435\u043c, \u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, React \u2014 \u043a\u043e\u0434 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e, Facebook \u043e\u0442\u043a\u0440\u044b\u043b \u0432\u0441\u0435\u0433\u043e \u0447\u0435\u0442\u044b\u0440\u0435 \u0433\u043e\u0434\u0430 \u043d\u0430\u0437\u0430\u0434, \u043e\u043d \u0443\u0436\u0435 \u0441\u0442\u0430\u043b \u0432\u044b\u0431\u043e\u0440\u043e\u043c \u043d\u043e\u043c\u0435\u0440 \u043e\u0434\u0438\u043d \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 JavaScript \u043f\u043e \u0432\u0441\u0435\u043c\u0443 \u043c\u0438\u0440\u0443. Vue \u0438 [&hellip;]<\/p>\n","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[702],"tags":[],"class_list":["post-52348","post","type-post","status-publish","format-standard","hentry","category-novosti-interneta"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 4.9.10 - aioseo.com -->\n\t<meta name=\"description\" content=\"\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u041d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u0442\u043e\u0433\u043e, \u044f\u0432\u043b\u044f\u0435\u0442\u0435\u0441\u044c \u043b\u0438 \u0432\u044b \u043d\u043e\u0432\u0438\u0447\u043a\u043e\u043c \u0432 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0438\u043b\u0438 \u0443\u0436\u0435 \u043e\u043f\u044b\u0442\u043d\u044b\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u043c, \u0432 \u044d\u0442\u043e\u0439 \u043e\u0442\u0440\u0430\u0441\u043b\u0438 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435 \u043d\u043e\u0432\u044b\u0445 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0439 \u0438 \u044f\u0437\u044b\u043a\u043e\u0432\/\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0447\u0442\u043e\u0431\u044b \u0443\u0441\u043f\u0435\u0432\u0430\u0442\u044c \u0437\u0430 \u0442\u0440\u0435\u043d\u0434\u0430\u043c\u0438. \u0412\u043e\u0437\u044c\u043c\u0435\u043c, \u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, React \u2014 \u043a\u043e\u0434 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e, Facebook \u043e\u0442\u043a\u0440\u044b\u043b \u0432\u0441\u0435\u0433\u043e \u0447\u0435\u0442\u044b\u0440\u0435 \u0433\u043e\u0434\u0430 \u043d\u0430\u0437\u0430\u0434, \u043e\u043d \u0443\u0436\u0435 \u0441\u0442\u0430\u043b \u0432\u044b\u0431\u043e\u0440\u043e\u043c \u043d\u043e\u043c\u0435\u0440 \u043e\u0434\u0438\u043d \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 JavaScript \u043f\u043e \u0432\u0441\u0435\u043c\u0443 \u043c\u0438\u0440\u0443. Vue \u0438\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Yuri Gagarin\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/prohoster.info\/et\/blog\/novosti-interneta\/eshhyo-9-proektov-dlya-ottachivaniya-front-end-masterstva\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 4.9.10\" \/>\n\t\t<meta property=\"og:locale\" content=\"et_EE\" \/>\n\t\t<meta property=\"og:site_name\" content=\"ProHoster | \u041a\u0443\u043f\u0438\u0442\u044c \u043d\u0430\u0434\u0435\u0436\u043d\u044b\u0439 \u0445\u043e\u0441\u0442\u0438\u043d\u0433 \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u043e\u0432 \u0441 \u0437\u0430\u0449\u0438\u0442\u043e\u0439 \u043e\u0442 DDoS, VPS VDS \u0441\u0435\u0440\u0432\u0435\u0440\u044b\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"\ud83e\udd47\u0415\u0449\u0451 9 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0434\u043b\u044f \u043e\u0442\u0442\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u044f Front-End \u043c\u0430\u0441\u0442\u0435\u0440\u0441\u0442\u0432\u0430 | ProHoster\" \/>\n\t\t<meta property=\"og:description\" content=\"\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u041d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u0442\u043e\u0433\u043e, \u044f\u0432\u043b\u044f\u0435\u0442\u0435\u0441\u044c \u043b\u0438 \u0432\u044b \u043d\u043e\u0432\u0438\u0447\u043a\u043e\u043c \u0432 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0438\u043b\u0438 \u0443\u0436\u0435 \u043e\u043f\u044b\u0442\u043d\u044b\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u043c, \u0432 \u044d\u0442\u043e\u0439 \u043e\u0442\u0440\u0430\u0441\u043b\u0438 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435 \u043d\u043e\u0432\u044b\u0445 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0439 \u0438 \u044f\u0437\u044b\u043a\u043e\u0432\/\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0447\u0442\u043e\u0431\u044b \u0443\u0441\u043f\u0435\u0432\u0430\u0442\u044c \u0437\u0430 \u0442\u0440\u0435\u043d\u0434\u0430\u043c\u0438. \u0412\u043e\u0437\u044c\u043c\u0435\u043c, \u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, React \u2014 \u043a\u043e\u0434 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e, Facebook \u043e\u0442\u043a\u0440\u044b\u043b \u0432\u0441\u0435\u0433\u043e \u0447\u0435\u0442\u044b\u0440\u0435 \u0433\u043e\u0434\u0430 \u043d\u0430\u0437\u0430\u0434, \u043e\u043d \u0443\u0436\u0435 \u0441\u0442\u0430\u043b \u0432\u044b\u0431\u043e\u0440\u043e\u043c \u043d\u043e\u043c\u0435\u0440 \u043e\u0434\u0438\u043d \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 JavaScript \u043f\u043e \u0432\u0441\u0435\u043c\u0443 \u043c\u0438\u0440\u0443. Vue \u0438\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/prohoster.info\/et\/blog\/novosti-interneta\/eshhyo-9-proektov-dlya-ottachivaniya-front-end-masterstva\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg\" \/>\n\t\t<meta property=\"og:image:width\" content=\"350\" \/>\n\t\t<meta property=\"og:image:height\" content=\"350\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2019-11-05T21:00:00+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2020-02-18T11:00:02+00:00\" \/>\n\t\t<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/prohoster\" \/>\n\t\t<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/prohoster\" \/>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"\ud83e\udd47 Veel 9 projekti Front-End oskuste lihvimiseks | ProHoster","description":"Sissejuhatus Olenemata sellest, kas olete programmeerimisega alles alustav v\u00f5i juba kogenud arendaja, on selles valdkonnas uute kontseptsioonide ja keelte\/raamistike \u00f5ppimine h\u00e4davajalik, et p\u00fcsida ajakohasena. V\u00f5tame n\u00e4iteks React \u2014 selle koodi avas Facebook ainult neli aastat tagasi ja see on juba saanud JavaScripti arendajate seas \u00fcle kogu maailma number \u00fcks valikuks. Vue ja","canonical_url":"https:\/\/prohoster.info\/et\/blog\/novosti-interneta\/eshhyo-9-proektov-dlya-ottachivaniya-front-end-masterstva","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"et_EE","og:site_name":"ProHoster | \u041a\u0443\u043f\u0438\u0442\u044c \u043d\u0430\u0434\u0435\u0436\u043d\u044b\u0439 \u0445\u043e\u0441\u0442\u0438\u043d\u0433 \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u043e\u0432 \u0441 \u0437\u0430\u0449\u0438\u0442\u043e\u0439 \u043e\u0442 DDoS, VPS VDS \u0441\u0435\u0440\u0432\u0435\u0440\u044b","og:type":"article","og:title":"\ud83e\udd47\u0415\u0449\u0451 9 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0434\u043b\u044f \u043e\u0442\u0442\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u044f Front-End \u043c\u0430\u0441\u0442\u0435\u0440\u0441\u0442\u0432\u0430 | ProHoster","og:description":"\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u041d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u0442\u043e\u0433\u043e, \u044f\u0432\u043b\u044f\u0435\u0442\u0435\u0441\u044c \u043b\u0438 \u0432\u044b \u043d\u043e\u0432\u0438\u0447\u043a\u043e\u043c \u0432 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0438\u043b\u0438 \u0443\u0436\u0435 \u043e\u043f\u044b\u0442\u043d\u044b\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u043c, \u0432 \u044d\u0442\u043e\u0439 \u043e\u0442\u0440\u0430\u0441\u043b\u0438 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435 \u043d\u043e\u0432\u044b\u0445 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0439 \u0438 \u044f\u0437\u044b\u043a\u043e\u0432\/\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0447\u0442\u043e\u0431\u044b \u0443\u0441\u043f\u0435\u0432\u0430\u0442\u044c \u0437\u0430 \u0442\u0440\u0435\u043d\u0434\u0430\u043c\u0438. \u0412\u043e\u0437\u044c\u043c\u0435\u043c, \u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, React \u2014 \u043a\u043e\u0434 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e, Facebook \u043e\u0442\u043a\u0440\u044b\u043b \u0432\u0441\u0435\u0433\u043e \u0447\u0435\u0442\u044b\u0440\u0435 \u0433\u043e\u0434\u0430 \u043d\u0430\u0437\u0430\u0434, \u043e\u043d \u0443\u0436\u0435 \u0441\u0442\u0430\u043b \u0432\u044b\u0431\u043e\u0440\u043e\u043c \u043d\u043e\u043c\u0435\u0440 \u043e\u0434\u0438\u043d \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 JavaScript \u043f\u043e \u0432\u0441\u0435\u043c\u0443 \u043c\u0438\u0440\u0443. Vue \u0438","og:url":"https:\/\/prohoster.info\/et\/blog\/novosti-interneta\/eshhyo-9-proektov-dlya-ottachivaniya-front-end-masterstva","og:image":"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg","og:image:secure_url":"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg","og:image:width":350,"og:image:height":350,"article:published_time":"2019-11-05T21:00:00+00:00","article:modified_time":"2020-02-18T11:00:02+00:00","article:publisher":"https:\/\/www.facebook.com\/prohoster","article:author":"https:\/\/www.facebook.com\/prohoster"},"aioseo_meta_data":{"post_id":"52348","title":null,"description":null,"keywords":null,"keyphrases":null,"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"","isEnabled":true},"graphs":[]},"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"local_seo":null,"seo_analyzer_scan_date":"2026-01-24 03:19:19","breadcrumb_settings":null,"limit_modified_date":false,"reviewed_by":null,"ai":null,"created":"2021-02-28 14:23:14","updated":"2026-01-24 03:19:19"},"gt_translate_keys":[{"key":"link","format":"url"}],"_links":{"self":[{"href":"https:\/\/prohoster.info\/et\/wp-json\/wp\/v2\/posts\/52348","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/et\/wp-json\/wp\/v2\/comments?post=52348"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/et\/wp-json\/wp\/v2\/posts\/52348\/revisions"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/et\/wp-json\/wp\/v2\/media?parent=52348"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/et\/wp-json\/wp\/v2\/categories?post=52348"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/et\/wp-json\/wp\/v2\/tags?post=52348"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}