{"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\/pl\/blog\/news\/eshhyo-9-proektov-dlya-ottachivaniya-front-end-masterstva","title":{"rendered":"Jeszcze 9 projekt\u00f3w do doskonalenia umiej\u0119tno\u015bci Front-End","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"<p><img decoding=\"async\" alt=\"Jeszcze 9 projekt\u00f3w do doskonalenia umiej\u0119tno\u015bci Front-End\" src=\"\/wp-content\/uploads\/2019\/11\/05c3246e5ca620b5ea66c0542b53f08a.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<\/p>\n<h3>Wprowadzenie<\/h3>\n<p>\nBez wzgl\u0119du na to, czy jeste\u015b nowicjuszem w programowaniu, czy ju\u017c do\u015bwiadczonym programist\u0105, w tej bran\u017cy nauka nowych koncepcji oraz j\u0119zyk\u00f3w\/framework\u00f3w jest konieczno\u015bci\u0105, aby nad\u0105\u017ca\u0107 za trendami.<\/p>\n<p>We\u017amy na przyk\u0142ad React \u2014 kod, kt\u00f3rego Facebook udost\u0119pni\u0142 zaledwie cztery lata temu, sta\u0142 si\u0119 ju\u017c numerem jeden w\u015br\u00f3d programist\u00f3w JavaScript na ca\u0142ym \u015bwiecie.<\/p>\n<p>Vue i Angular, oczywi\u015bcie, r\u00f3wnie\u017c maj\u0105 swoj\u0105 wiern\u0105 baz\u0119 fan\u00f3w. A s\u0105 jeszcze Svelte oraz inne wszechstronne frameworki, takie jak Next.js czy Nuxt.js. I Gatsby, i Gridsome, i Quasar\u2026 i wiele innych.<\/p>\n<p>Je\u015bli chcesz si\u0119 wykaza\u0107 jako do\u015bwiadczony programista JavaScript, powiniene\u015b mie\u0107 przynajmniej pewne do\u015bwiadczenie z r\u00f3\u017cnymi frameworkami i bibliotekami, opr\u00f3cz pracy z dobrym, starym JS.<\/p>\n<p>Aby pom\u00f3c Ci sta\u0107 si\u0119 mistrzem front-endu w 2020 roku, zebra\u0142em dziewi\u0119\u0107 r\u00f3\u017cnych projekt\u00f3w, z kt\u00f3rych ka\u017cdy po\u015bwi\u0119cony jest innemu frameworkowi i bibliotece JavaScript jako zestawowi technicznemu, kt\u00f3ry mo\u017cesz stworzy\u0107 i doda\u0107 do swojego portfolio. Pami\u0119taj, \u017ce nic nie pomaga Ci bardziej ni\u017c praktyczne tworzenie rzeczy, wi\u0119c id\u017a naprz\u00f3d, w\u0142\u0105cz sw\u00f3j umys\u0142 i spraw, by to by\u0142o mo\u017cliwe.<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 - rozw\u00f3j stron internetowych\"><img decoding=\"async\" alt=\"Jeszcze 9 projekt\u00f3w do doskonalenia umiej\u0119tno\u015bci Front-End\" src=\"\/wp-content\/uploads\/2019\/11\/4f292db7c47eaa9d6e764f5a595d0edf.jpeg\" style=\"display:block;margin: 0 auto;\" \/><\/a><\/noindex><br clear=\"right\"><br \/>\nArtyku\u0142 zosta\u0142 przet\u0142umaczony przy wsparciu firmy EDISON Software, kt\u00f3ra <noindex><a rel=\"nofollow\" href=\"https:\/\/www.edsd.ru\/virtualnaya-primerochnaya\">tworzy wirtualne przymierzalnie dla sklep\u00f3w multibrandowych<\/a><\/noindex>, a tak\u017ce <noindex><a rel=\"nofollow\" href=\"https:\/\/www.edsd.ru\/ru\/uslugi\/testirovanie_po\">testuje oprogramowanie<\/a><\/noindex>.<\/p><\/blockquote>\n<p><\/p>\n<h3>Aplikacja do wyszukiwania film\u00f3w z u\u017cyciem React (z hookami)<\/h3>\n<p>\nPierwsze, od czego mo\u017cesz zacz\u0105\u0107, to stworzenie aplikacji do wyszukiwania film\u00f3w z u\u017cyciem React. Poni\u017cej znajduje si\u0119 obrazek przedstawiaj\u0105cy, jak b\u0119dzie wygl\u0105da\u0107 finalna aplikacja:<\/p>\n<p><img decoding=\"async\" alt=\"Jeszcze 9 projekt\u00f3w do doskonalenia umiej\u0119tno\u015bci Front-End\" src=\"\/wp-content\/uploads\/2019\/11\/de9873700abc86e1ec63e92704f80dcf.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Czego si\u0119 nauczysz<\/b><br \/>\nTworz\u0105c t\u0119 aplikacj\u0119, poprawisz swoje umiej\u0119tno\u015bci w React, u\u017cywaj\u0105c stosunkowo nowego API Hook. W przyk\u0142adowym projekcie u\u017cyto komponent\u00f3w React, wielu hook\u00f3w, zewn\u0119trznego API oraz, oczywi\u015bcie, kilku styl\u00f3w CSS.<\/p>\n<p><b>Zestaw technologii i funkcje<\/b><\/p>\n<ul>\n<li>React z hookami<\/li>\n<li>create-react-app<\/li>\n<li>JSX<\/li>\n<li>CSS<\/li>\n<\/ul>\n<p>\nBez u\u017cycia jakichkolwiek klas, te projekty daj\u0105 Ci idealny punkt wej\u015bcia w funkcjonalny React i z pewno\u015bci\u0105 pomog\u0105 Ci w 2020 roku. Mo\u017cesz znale\u017a\u0107 <noindex><a rel=\"nofollow\" href=\"https:\/\/www.freecodecamp.org\/news\/how-to-build-a-movie-search-app-using-react-hooks-24eb72ddfaf7\/\">przyk\u0142ad projektu tutaj<\/a><\/noindex>. Post\u0119puj zgodnie z instrukcjami lub zr\u00f3b wszystko po swojemu.<\/p>\n<h3>Aplikacja czatu z u\u017cyciem Vue<\/h3>\n<p>\nKolejny \u015bwietny projekt dla Ciebie to stworzenie aplikacji czatu, wykorzystuj\u0105c moj\u0105 ulubion\u0105 bibliotek\u0119 JavaScript: VueJS. Aplikacja b\u0119dzie wygl\u0105da\u0107 mniej wi\u0119cej tak:<\/p>\n<p><img decoding=\"async\" alt=\"Jeszcze 9 projekt\u00f3w do doskonalenia umiej\u0119tno\u015bci Front-End\" src=\"\/wp-content\/uploads\/2019\/11\/3c55136bcf260168f951e923983dc3a0.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Czego si\u0119 nauczysz<\/b><br \/>\nZ tego przewodnika dowiesz si\u0119, jak stworzy\u0107 aplikacj\u0119 Vue od podstaw \u2014 jak tworzy\u0107 komponenty, zarz\u0105dza\u0107 stanem, tworzy\u0107 trasy, \u0142\u0105czy\u0107 si\u0119 z zewn\u0119trznymi us\u0142ugami, a nawet zajmowa\u0107 si\u0119 uwierzytelnianiem.<\/p>\n<p><b>Zestaw technologii i funkcje<\/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>\nTo naprawd\u0119 \u015bwietny projekt, aby rozpocz\u0105\u0107 prac\u0119 z Vue lub poprawi\u0107 swoje istniej\u0105ce umiej\u0119tno\u015bci w zakresie programowania w 2020 roku. Mo\u017cesz znale\u017a\u0107 <noindex><a rel=\"nofollow\" href=\"https:\/\/www.sitepoint.com\/pusher-vue-real-time-chat-app\/\">tutorial tutaj<\/a><\/noindex>.<\/p>\n<h3>Pi\u0119kna aplikacja do przegl\u0105dania pogody z Angular 8<\/h3>\n<p>\nTen przyk\u0142ad pomo\u017ce Ci stworzy\u0107 pi\u0119kn\u0105 aplikacj\u0119 do przegl\u0105dania pogody przy u\u017cyciu Angular 8:<\/p>\n<p><img decoding=\"async\" alt=\"Jeszcze 9 projekt\u00f3w do doskonalenia umiej\u0119tno\u015bci Front-End\" src=\"\/wp-content\/uploads\/2019\/11\/93575fb69c667f04a00c58bfeb8b9699.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Czego si\u0119 nauczysz<\/b><br \/>\nTen projekt nauczy Ci\u0119 cennych umiej\u0119tno\u015bci przy tworzeniu aplikacji od podstaw \u2014 od projektowania, poprzez rozw\u00f3j, a\u017c po gotow\u0105 do wdro\u017cenia aplikacj\u0119.<\/p>\n<p><b>Zestaw technologii i funkcje<\/b><\/p>\n<ul>\n<li>Angular 8<\/li>\n<li>Firebase<\/li>\n<li>Renderowanie po stronie serwera<\/li>\n<li>CSS z siatk\u0105 i Flexboxem<\/li>\n<li>Przyjazny dla urz\u0105dze\u0144 mobilnych oraz responsywno\u015b\u0107<\/li>\n<li>Tryb ciemny<\/li>\n<li>Pi\u0119kny interfejs<\/li>\n<\/ul>\n<p>\nCo naprawd\u0119 bardzo mi si\u0119 podoba w tym kompleksowym projekcie, to \u017ce nie uczysz si\u0119 rzeczy w izolacji. Zamiast tego uczysz si\u0119 ca\u0142ego procesu rozwoju \u2014 od projektowania do finalnego wdro\u017cenia.<\/p>\n<h3>Aplikacja To-Do za pomoc\u0105 Svelte<\/h3>\n<p>\nSvelte to jak nowy gracz w podej\u015bciu komponentowym \u2014 przynajmniej podobny do React, Vue i Angular. I to jedna z najgor\u0119tszych nowinek w 2020 roku.<\/p>\n<p>Aplikacje To-Do niekoniecznie s\u0105 najgor\u0119tszym tematem, ale naprawd\u0119 pomog\u0105 Ci doskonali\u0107 swoje umiej\u0119tno\u015bci w Svelte. B\u0119dzie to wygl\u0105da\u0107 tak:<\/p>\n<p><img decoding=\"async\" alt=\"Jeszcze 9 projekt\u00f3w do doskonalenia umiej\u0119tno\u015bci Front-End\" src=\"\/wp-content\/uploads\/2019\/11\/1d2d414f5acbb3cfd0df5bf7ff29befd.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Czego si\u0119 nauczysz<\/b><br \/>\nZ tego tutorialu nauczysz si\u0119, jak stworzy\u0107 aplikacj\u0119 przy u\u017cyciu Svelte 3, od pocz\u0105tku do ko\u0144ca. B\u0119dziesz u\u017cywa\u0107 komponent\u00f3w, stylizacji i obs\u0142ugi wydarze\u0144.<\/p>\n<p><b>Zestaw technologii i funkcje<\/b><\/p>\n<ul>\n<li>Svelte 3<\/li>\n<li>Sk\u0142adniki<\/li>\n<li>Stylizacja przy u\u017cyciu CSS<\/li>\n<li>Sk\u0142adnia ES 6<\/li>\n<\/ul>\n<p>\nNie ma zbyt wielu dobrych projekt\u00f3w startowych w Svelte, dlatego znalaz\u0142em <noindex><a rel=\"nofollow\" href=\"https:\/\/medium.com\/codingthesmartway-com-blog\/building-a-svelte-3-todo-app-from-start-to-deployment-1737f72c23a6\">ten dobry pomys\u0142 na pocz\u0105tek<\/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 jest najpopularniejszym frameworkiem do tworzenia aplikacji React, kt\u00f3re obs\u0142uguj\u0105 renderowanie po stronie serwera od r\u0119ki.<\/p>\n<p>Ten projekt poka\u017ce Ci, jak stworzy\u0107 aplikacj\u0119 e-commerce, kt\u00f3ra wygl\u0105da nast\u0119puj\u0105co:<\/p>\n<p><img decoding=\"async\" alt=\"Jeszcze 9 projekt\u00f3w do doskonalenia umiej\u0119tno\u015bci Front-End\" src=\"\/wp-content\/uploads\/2019\/11\/a848293ad9952a3c52bf8d059bf55ab9.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Czego si\u0119 nauczysz<\/b><br \/>\nW tym projekcie dowiesz si\u0119, jak programowa\u0107 z u\u017cyciem Next.js \u2014 jak tworzy\u0107 nowe strony i komponenty, pobiera\u0107 dane oraz stylizowa\u0107 i wdra\u017ca\u0107 aplikacj\u0119 Next.<\/p>\n<p><b>Zestaw technologii i funkcje<\/b><\/p>\n<ul>\n<li>Next.js<\/li>\n<li>Komponenty i strony<\/li>\n<li>Wyb\u00f3r danych<\/li>\n<li>Stylizacja<\/li>\n<li>Wdro\u017cenie projektu<\/li>\n<li>SSR i SPA<\/li>\n<\/ul>\n<p>\nZawsze mi\u0142o mie\u0107 rzeczywisty przyk\u0142ad, taki jak aplikacja do e-commerce, aby nauczy\u0107 si\u0119 czego\u015b nowego. Mo\u017cesz <noindex><a rel=\"nofollow\" href=\"https:\/\/snipcart.com\/blog\/next-js-ecommerce-tutorial\">znale\u017a\u0107 samouczek tutaj<\/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 dla Vue to to samo co Next.js dla React: \u015bwietny framework do \u0142\u0105czenia mo\u017cliwo\u015bci renderowania po stronie serwera z aplikacjami jednostronicowymi<br \/>\nOstatnia aplikacja, kt\u00f3r\u0105 mo\u017cesz stworzy\u0107, b\u0119dzie wygl\u0105da\u0107 tak:<\/p>\n<p><img decoding=\"async\" alt=\"Jeszcze 9 projekt\u00f3w do doskonalenia umiej\u0119tno\u015bci Front-End\" src=\"\/wp-content\/uploads\/2019\/11\/ba05c24c81705c454c32d363e9a74fe5.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Czego si\u0119 nauczysz<\/b><\/p>\n<p>W tym przyk\u0142adzie projektu dowiesz si\u0119, jak stworzy\u0107 w pe\u0142ni funkcjonaln\u0105 stron\u0119 internetow\u0105 za pomoc\u0105 Nuxt.js \u2014 od pocz\u0105tkowej konfiguracji do ostatecznego wdro\u017cenia.<\/p>\n<p>Wykorzystuje wiele interesuj\u0105cych funkcji, kt\u00f3re oferuje Nuxt, takich jak strony i komponenty, a tak\u017ce stylizacj\u0119 za pomoc\u0105 SCSS.<\/p>\n<p><b>Zestaw technologii i funkcje<\/b><\/p>\n<ul>\n<li>Nuxt.js<\/li>\n<li>Komponenty i strony<\/li>\n<li>Modu\u0142 Storyblock<\/li>\n<li>Mixiny<\/li>\n<li>Vuex do zarz\u0105dzania stanem<\/li>\n<li>SCSS do stylizacji<\/li>\n<li>Middleware Nuxt<\/li>\n<\/ul>\n<p>\n<noindex><a rel=\"nofollow\" href=\"https:\/\/www.storyblok.com\/tp\/nuxt-js-multilanguage-website-tutorial\">To naprawd\u0119 \u015bwietny projekt<\/a><\/noindex>, kt\u00f3ry zawiera wiele wspania\u0142ych mo\u017cliwo\u015bci Nuxt.js. Osobi\u015bcie uwielbiam pracowa\u0107 z Nuxt, wi\u0119c warto spr\u00f3bowa\u0107, poniewa\u017c to uczyni ci\u0119 r\u00f3wnie\u017c doskona\u0142ym deweloperem Vue.<\/p>\n<h3>Blog z Gatsby<\/h3>\n<p>\nGatsby to \u015bwietny generator statycznych stron, kt\u00f3ry wykorzystuje React i GraphQL. To wynik projektu:<\/p>\n<p><img decoding=\"async\" alt=\"Jeszcze 9 projekt\u00f3w do doskonalenia umiej\u0119tno\u015bci Front-End\" src=\"\/wp-content\/uploads\/2019\/11\/4a51e59e1983da87d2110f8b06e29e33.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Czego si\u0119 nauczysz<\/b><\/p>\n<p>W tym przewodniku dowiesz si\u0119, jak u\u017cywa\u0107 Gatsby do stworzenia bloga, kt\u00f3ry b\u0119dziesz u\u017cywa\u0107 do pisania w\u0142asnych artyku\u0142\u00f3w, wykorzystuj\u0105c React i GraphQL.<\/p>\n<p><b>Zestaw technologii i funkcje<\/b><\/p>\n<ul>\n<li>Gatsby<\/li>\n<li>React<\/li>\n<li>GraphQL<\/li>\n<li>Wtyczki i motywy<\/li>\n<li>MDX\/Markdown<\/li>\n<li>Bootstrap CSS<\/li>\n<li>Szablony<\/li>\n<\/ul>\n<p>\nJe\u015bli kiedykolwiek chcia\u0142e\u015b za\u0142o\u017cy\u0107 bloga, <noindex><a rel=\"nofollow\" href=\"https:\/\/blog.bitsrc.io\/how-to-build-a-blog-with-gatsby-and-boostrap-d1270212b3dc\">to \u015bwietny przyk\u0142ad<\/a><\/noindex> jak go stworzy\u0107, u\u017cywaj\u0105c React i GraphQL.<\/p>\n<p>Nie m\u00f3wi\u0119, \u017ce WordPress jest z\u0142ym wyborem, ale z Gatsby mo\u017cesz tworzy\u0107 wydajne strony internetowe, u\u017cywaj\u0105c React \u2014 co jest niesamowit\u0105 kombinacj\u0105.<\/p>\n<h3>Blog z Gridsome<\/h3>\n<p>\nGridsome dla Vue\u2026 C\u00f3\u017c, mieli\u015bmy to ju\u017c z Next\/Nuxt.<br \/>\nJednak to samo dotyczy Gridsome i Gatsby. Obydwa u\u017cywaj\u0105 GraphQL jako warstwy danych, ale Gridsome wykorzystuje VueJS. To tak\u017ce niesamowity generator stron statycznych, kt\u00f3ry pomo\u017ce ci tworzy\u0107 \u015bwietne blogi:<\/p>\n<p><img decoding=\"async\" alt=\"Jeszcze 9 projekt\u00f3w do doskonalenia umiej\u0119tno\u015bci Front-End\" src=\"\/wp-content\/uploads\/2019\/11\/3d0162d6aeba8481056f4dee9f25808d.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Czego si\u0119 nauczysz<\/b><\/p>\n<p>Ten projekt nauczy ci\u0119, jak stworzy\u0107 prostego bloga, aby rozpocz\u0105\u0107 prac\u0119 z Gridsome, GraphQL i Markdown. Zawiera r\u00f3wnie\u017c informacje o tym, jak wdro\u017cy\u0107 aplikacj\u0119 przez Netlify.<\/p>\n<p><b>Zestaw technologii i funkcje<\/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>\nTo oczywi\u015bcie nie jest najbardziej kompleksowy samouczek, ale obejmuje podstawowe poj\u0119cia Gridsome i <noindex><a rel=\"nofollow\" href=\"https:\/\/www.telerik.com\/blogs\/building-a-blog-with-vue-and-markdown-using-gridsome\">Markdown i mo\u017ce by\u0107 dobrym punktem wyj\u015bcia<\/a><\/noindex>.<\/p>\n<h3>Odtwarzacz audio podobny do SoundCloud z u\u017cyciem Quasar<\/h3>\n<p>\nQuasar to kolejny framework Vue, kt\u00f3ry mo\u017cna wykorzysta\u0107 do tworzenia aplikacji mobilnych. W tym projekcie stworzysz aplikacj\u0119 odtwarzacza audio, na przyk\u0142ad:<\/p>\n<p><img decoding=\"async\" alt=\"Jeszcze 9 projekt\u00f3w do doskonalenia umiej\u0119tno\u015bci Front-End\" src=\"\/wp-content\/uploads\/2019\/11\/e7acef4f60608d581533c038c61a0752.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Czego si\u0119 nauczysz<\/b><\/p>\n<p>Podczas gdy inne projekty koncentruj\u0105 si\u0119 g\u0142\u00f3wnie na aplikacjach internetowych, ten poka\u017ce Ci, jak stworzy\u0107 aplikacj\u0119 mobiln\u0105 z wykorzystaniem Vue i frameworka Quasar.<br \/>\nMusisz mie\u0107 ju\u017c dzia\u0142aj\u0105c\u0105 Cordova z skonfigurowanym Android Studio\/Xcode. Je\u015bli nie, w instrukcji znajduje si\u0119 link do strony Quasar, na kt\u00f3rej pokazuj\u0105, jak wszystko skonfigurowa\u0107.<\/p>\n<p><b>Zestaw technologii i funkcje<\/b><\/p>\n<ul>\n<li>Quasar<\/li>\n<li>Vue<\/li>\n<li>Cordova<\/li>\n<li>WaveSurfer<\/li>\n<li>Komponenty UI<\/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\">Ma\u0142y projekt<\/a><\/noindex>, demonstruj\u0105cy mo\u017cliwo\u015bci Quasar w tworzeniu aplikacji mobilnych.<br \/>\n<br \/>\u0179r\u00f3d\u0142o: <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-news"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.1.1 - 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.\" \/>\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\/pl\/blog\/news\/eshhyo-9-proektov-dlya-ottachivaniya-front-end-masterstva\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.1.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"pl_PL\" \/>\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.\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/prohoster.info\/pl\/blog\/news\/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\udd47Jeszcze 9 projekt\u00f3w do doskonalenia umiej\u0119tno\u015bci Front-End | ProHoster","description":"Wprowadzenie Niezale\u017cnie od.","canonical_url":"https:\/\/prohoster.info\/pl\/blog\/news\/eshhyo-9-proektov-dlya-ottachivaniya-front-end-masterstva","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"pl_PL","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.","og:url":"https:\/\/prohoster.info\/pl\/blog\/news\/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","focus_keyword":null,"additional_keywords":null,"truseo_locale":null},"gt_translate_keys":[{"key":"link","format":"url"}],"_links":{"self":[{"href":"https:\/\/prohoster.info\/pl\/wp-json\/wp\/v2\/posts\/52348","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/pl\/wp-json\/wp\/v2\/comments?post=52348"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/pl\/wp-json\/wp\/v2\/posts\/52348\/revisions"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/pl\/wp-json\/wp\/v2\/media?parent=52348"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/pl\/wp-json\/wp\/v2\/categories?post=52348"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/pl\/wp-json\/wp\/v2\/tags?post=52348"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}