{"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\/sv\/blog\/news\/eshhyo-9-proektov-dlya-ottachivaniya-front-end-masterstva","title":{"rendered":"Ytterligare 9 projekt f\u00f6r att finslipa dina Front-End-f\u00e4rdigheter","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"<p><img decoding=\"async\" alt=\"Ytterligare 9 projekt f\u00f6r att finslipa dina Front-End-f\u00e4rdigheter\" src=\"\/wp-content\/uploads\/2019\/11\/05c3246e5ca620b5ea66c0542b53f08a.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<\/p>\n<h3>Introduktion<\/h3>\n<p>\nOavsett om du \u00e4r ny inom programmering eller en erfaren utvecklare \u00e4r det n\u00f6dv\u00e4ndigt i denna bransch att l\u00e4ra sig nya koncept och spr\u00e5k\/ramverk f\u00f6r att h\u00e4nga med i trenderna.<\/p>\n<p>L\u00e5t oss ta React som exempel \u2014 koden f\u00f6r vilket Facebook sl\u00e4ppte f\u00f6r bara fyra \u00e5r sedan, och som redan blivit det fr\u00e4msta valet f\u00f6r JavaScript-utvecklare v\u00e4rlden \u00f6ver.<\/p>\n<p>Vue och Angular har f\u00f6rst\u00e5s ocks\u00e5 sina trogna f\u00f6ljare. Och sedan finns det Svelte och andra m\u00e5ngsidiga ramverk, som Next.js eller Nuxt.js. B\u00e5de Gatsby, Gridsome, Quasar\u2026 och mycket mer.<\/p>\n<p>Om du vill framst\u00e5 som en erfaren JavaScript-utvecklare b\u00f6r du ha \u00e5tminstone viss erfarenhet av olika ramverk och bibliotek \u2013 ut\u00f6ver att arbeta med den klassiska, gamla JS.<\/p>\n<p>F\u00f6r att hj\u00e4lpa dig att bli en frontendm\u00e4stare 2020 har jag samlat nio olika projekt, var och en fokuserad p\u00e5 olika JavaScript-ramverk och bibliotek som teknisk stack, som du kan skapa och l\u00e4gga till i din portf\u00f6lj. Kom ih\u00e5g att inget hj\u00e4lper dig mer \u00e4n att praktiskt skapa saker, s\u00e5 g\u00e5 fram\u00e5t, aktivera ditt sinne och g\u00f6r det m\u00f6jligt.<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 - webbutveckling\"><img decoding=\"async\" alt=\"Ytterligare 9 projekt f\u00f6r att finslipa dina Front-End-f\u00e4rdigheter\" src=\"\/wp-content\/uploads\/2019\/11\/4f292db7c47eaa9d6e764f5a595d0edf.jpeg\" style=\"display:block;margin: 0 auto;\" \/><\/a><\/noindex><br clear=\"right\"><br \/>\nArtikeln \u00e4r \u00f6versatt med st\u00f6d av f\u00f6retaget EDISON Software, som <noindex><a rel=\"nofollow\" href=\"https:\/\/www.edsd.ru\/virtualnaya-primerochnaya\">skapar virtuella provrum f\u00f6r multibrandsbutiker<\/a><\/noindex>, samt <noindex><a rel=\"nofollow\" href=\"https:\/\/www.edsd.ru\/ru\/uslugi\/testirovanie_po\">testar mjukvara<\/a><\/noindex>.<\/p><\/blockquote>\n<p><\/p>\n<h3>Films\u00f6kningsapp med React (med hooks)<\/h3>\n<p>\nDet f\u00f6rsta steget kan vara att skapa en films\u00f6kningsapp med React. H\u00e4r \u00e4r en bild av hur den slutliga appen kommer att se ut:<\/p>\n<p><img decoding=\"async\" alt=\"Ytterligare 9 projekt f\u00f6r att finslipa dina Front-End-f\u00e4rdigheter\" src=\"\/wp-content\/uploads\/2019\/11\/de9873700abc86e1ec63e92704f80dcf.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Vad du kommer att l\u00e4ra dig<\/b><br \/>\nGenom att skapa denna app kommer du att f\u00f6rb\u00e4ttra dina React-f\u00e4rdigheter genom att anv\u00e4nda det relativt nya API:et Hooks. I exempelprojektet anv\u00e4nds React-komponenter, m\u00e5nga hooks, ett externt API och naturligtvis n\u00e5gra CSS-stilar.<\/p>\n<p><b>Teknisk stack och funktioner<\/b><\/p>\n<ul>\n<li>React med hooks<\/li>\n<li>create-react-app<\/li>\n<li>JSX<\/li>\n<li>CSS<\/li>\n<\/ul>\n<p>\nUtan att anv\u00e4nda n\u00e5gra klasser ger dessa projekt dig en perfekt ing\u00e5ngspunkt i funktionell React och kommer definitivt att hj\u00e4lpa dig under 2020. Du kan hitta <noindex><a rel=\"nofollow\" href=\"https:\/\/www.freecodecamp.org\/news\/how-to-build-a-movie-search-app-using-react-hooks-24eb72ddfaf7\/\">projekt exempel h\u00e4r<\/a><\/noindex>. F\u00f6lj instruktionerna eller g\u00f6r allt efter eget tycke.<\/p>\n<h3>Chattapp med Vue<\/h3>\n<p>\nEtt annat utm\u00e4rkt projekt f\u00f6r dig \u00e4r att skapa en chattapp med hj\u00e4lp av mitt favoritspr\u00e5k f\u00f6r JavaScript: VueJS. Appen kommer att se ut ungef\u00e4r s\u00e5 h\u00e4r:<\/p>\n<p><img decoding=\"async\" alt=\"Ytterligare 9 projekt f\u00f6r att finslipa dina Front-End-f\u00e4rdigheter\" src=\"\/wp-content\/uploads\/2019\/11\/3c55136bcf260168f951e923983dc3a0.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Vad du kommer att l\u00e4ra dig<\/b><br \/>\nI den h\u00e4r guiden f\u00e5r du l\u00e4ra dig hur du skapar en Vue-applikation fr\u00e5n grunden \u2013 skapa komponenter, hantera tillst\u00e5nd, skapa rutter, ansluta till tredjepartstj\u00e4nster och till och med hantera autentisering.<\/p>\n<p><b>Teknisk stack och funktioner<\/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>\nDetta \u00e4r verkligen ett utm\u00e4rkt projekt f\u00f6r att b\u00f6rja arbeta med Vue eller f\u00f6rb\u00e4ttra dina befintliga f\u00e4rdigheter f\u00f6r att ge dig in i utveckling under 2020. Du kan hitta <noindex><a rel=\"nofollow\" href=\"https:\/\/www.sitepoint.com\/pusher-vue-real-time-chat-app\/\">en handledning h\u00e4r<\/a><\/noindex>.<\/p>\n<h3>En vacker v\u00e4derapplikation med Angular 8<\/h3>\n<p>\nDetta exempel hj\u00e4lper dig att skapa en vacker v\u00e4derapplikation med Angular 8:<\/p>\n<p><img decoding=\"async\" alt=\"Ytterligare 9 projekt f\u00f6r att finslipa dina Front-End-f\u00e4rdigheter\" src=\"\/wp-content\/uploads\/2019\/11\/93575fb69c667f04a00c58bfeb8b9699.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Vad du kommer att l\u00e4ra dig<\/b><br \/>\nDetta projekt kommer att l\u00e4ra dig v\u00e4rdefulla f\u00e4rdigheter n\u00e4r du skapar applikationer fr\u00e5n grunden - fr\u00e5n design till utveckling, \u00e4nda till en redo f\u00f6r distribution-applikation.<\/p>\n<p><b>Teknisk stack och funktioner<\/b><\/p>\n<ul>\n<li>Angular 8<\/li>\n<li>Firebase<\/li>\n<li>Server-rendering<\/li>\n<li>CSS med grid och Flexbox<\/li>\n<li>Mobilv\u00e4nligt och responsivt<\/li>\n<li>M\u00f6rkt l\u00e4ge<\/li>\n<li>Vacker gr\u00e4nssnitt<\/li>\n<\/ul>\n<p>\nDet jag verkligen gillar med detta omfattande projekt \u00e4r att du inte l\u00e4r dig saker i isolering. Ist\u00e4llet l\u00e4r du dig hela utvecklingsprocessen \u2013 fr\u00e5n design till slutdistribution.<\/p>\n<h3>To-Do-applikation med Svelte<\/h3>\n<p>\nSvelte \u00e4r som den nya ungen inom komponentmetoden \u2013 \u00e5tminstone liknande React, Vue och Angular. Och det \u00e4r en av de hetaste nyheterna f\u00f6r 2020.<\/p>\n<p>To-Do-applikationer beh\u00f6ver inte vara det mest sp\u00e4nnande \u00e4mnet, men de hj\u00e4lper dig verkligen att finslipa dina Svelte-f\u00e4rdigheter. Det kommer att se ut s\u00e5 h\u00e4r:<\/p>\n<p><img decoding=\"async\" alt=\"Ytterligare 9 projekt f\u00f6r att finslipa dina Front-End-f\u00e4rdigheter\" src=\"\/wp-content\/uploads\/2019\/11\/1d2d414f5acbb3cfd0df5bf7ff29befd.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Vad du kommer att l\u00e4ra dig<\/b><br \/>\nI denna handledning f\u00e5r du l\u00e4ra dig hur du skapar en applikation med Svelte 3, fr\u00e5n b\u00f6rjan till slut. Du kommer att anv\u00e4nda komponenter, styling och h\u00e4ndelsehanterare.<\/p>\n<p><b>Teknisk stack och funktioner<\/b><\/p>\n<ul>\n<li>Svelte 3<\/li>\n<li>Komponenter<\/li>\n<li>Styling med CSS<\/li>\n<li>ES 6-syntax<\/li>\n<\/ul>\n<p>\nDet finns inte s\u00e5 m\u00e5nga bra startprojekt f\u00f6r Svelte, s\u00e5 jag har hittat <noindex><a rel=\"nofollow\" href=\"https:\/\/medium.com\/codingthesmartway-com-blog\/building-a-svelte-3-todo-app-from-start-to-deployment-1737f72c23a6\">detta bra alternativ f\u00f6r att b\u00f6rja<\/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 \u00e4r det mest popul\u00e4ra ramverket f\u00f6r att bygga React-applikationer som st\u00f6der server-rendering ur l\u00e5dan.<\/p>\n<p>Detta projekt kommer att visa dig hur du skapar en e-handelsapplikation som ser ut s\u00e5 h\u00e4r:<\/p>\n<p><img decoding=\"async\" alt=\"Ytterligare 9 projekt f\u00f6r att finslipa dina Front-End-f\u00e4rdigheter\" src=\"\/wp-content\/uploads\/2019\/11\/a848293ad9952a3c52bf8d059bf55ab9.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Vad du kommer att l\u00e4ra dig<\/b><br \/>\nI det h\u00e4r projektet kommer du att l\u00e4ra dig att utveckla med Next.js - skapa nya sidor och komponenter, h\u00e4mta data samt styla och distribuera Next-applikationen.<\/p>\n<p><b>Teknisk stack och funktioner<\/b><\/p>\n<ul>\n<li>Next.js<\/li>\n<li>Komponenter och sidor<\/li>\n<li>Datah\u00e4mtning<\/li>\n<li>Styling<\/li>\n<li>Distribution av projektet<\/li>\n<li>SSR och SPA<\/li>\n<\/ul>\n<p>\nDet \u00e4r alltid bra att ha ett verkligt exempel, som en e-handelsapp, f\u00f6r att l\u00e4ra sig n\u00e5got nytt. Du kan <noindex><a rel=\"nofollow\" href=\"https:\/\/snipcart.com\/blog\/next-js-ecommerce-tutorial\">hitta en handledning h\u00e4r<\/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 f\u00f6r Vue, samma som Next.js f\u00f6r React: ett utm\u00e4rkt ramverk f\u00f6r att kombinera funktionerna f\u00f6r server-side rendering och single-page applications.<br \/>\nDen senaste appen du kan skapa kommer att se ut s\u00e5 h\u00e4r:<\/p>\n<p><img decoding=\"async\" alt=\"Ytterligare 9 projekt f\u00f6r att finslipa dina Front-End-f\u00e4rdigheter\" src=\"\/wp-content\/uploads\/2019\/11\/ba05c24c81705c454c32d363e9a74fe5.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Vad du kommer att l\u00e4ra dig<\/b><\/p>\n<p>I det h\u00e4r projektet f\u00e5r du l\u00e4ra dig hur man skapar en fullst\u00e4ndig webbplats med Nuxt.js \u2014 fr\u00e5n initial inst\u00e4llning till slutlig distribution.<\/p>\n<p>Den anv\u00e4nder m\u00e5nga intressanta funktioner som Nuxt kan erbjuda, som sidor och komponenter samt styling med SCSS.<\/p>\n<p><b>Teknisk stack och funktioner<\/b><\/p>\n<ul>\n<li>Nuxt.js<\/li>\n<li>Komponenter och sidor<\/li>\n<li>Storyblok-modul<\/li>\n<li>Mixins<\/li>\n<li>Vuex f\u00f6r state management<\/li>\n<li>SCSS f\u00f6r styling<\/li>\n<li>Nuxt-mellanprogram<\/li>\n<\/ul>\n<p>\n<noindex><a rel=\"nofollow\" href=\"https:\/\/www.storyblok.com\/tp\/nuxt-js-multilanguage-website-tutorial\">Det h\u00e4r \u00e4r verkligen ett coolt projekt<\/a><\/noindex>, som inkluderar m\u00e5nga fantastiska funktioner hos Nuxt.js. Jag \u00e4lskar personligen att arbeta med Nuxt, s\u00e5 du b\u00f6r verkligen prova det, eftersom det ocks\u00e5 kommer att g\u00f6ra dig till en fantastisk Vue-utvecklare.<\/p>\n<h3>Blogg med Gatsby<\/h3>\n<p>\nGatsby \u00e4r en utm\u00e4rkt generator f\u00f6r statiska webbplatser som anv\u00e4nder React och GraphQL. Det h\u00e4r \u00e4r resultatet av projektet:<\/p>\n<p><img decoding=\"async\" alt=\"Ytterligare 9 projekt f\u00f6r att finslipa dina Front-End-f\u00e4rdigheter\" src=\"\/wp-content\/uploads\/2019\/11\/4a51e59e1983da87d2110f8b06e29e33.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Vad du kommer att l\u00e4ra dig<\/b><\/p>\n<p>I den h\u00e4r guiden kommer du att l\u00e4ra dig hur man anv\u00e4nder Gatsby f\u00f6r att skapa en blogg som du kommer att anv\u00e4nda f\u00f6r att skriva dina egna artiklar med React och GraphQL.<\/p>\n<p><b>Teknisk stack och funktioner<\/b><\/p>\n<ul>\n<li>Gatsby<\/li>\n<li>React<\/li>\n<li>GraphQL<\/li>\n<li>Plugins och teman<\/li>\n<li>MDX\/Markdown<\/li>\n<li>Bootstrap CSS<\/li>\n<li>Mallar<\/li>\n<\/ul>\n<p>\nOm du n\u00e5gonsin har velat starta en blogg, <noindex><a rel=\"nofollow\" href=\"https:\/\/blog.bitsrc.io\/how-to-build-a-blog-with-gatsby-and-boostrap-d1270212b3dc\">\u00e4r det h\u00e4r ett utm\u00e4rkt exempel<\/a><\/noindex> p\u00e5 hur man g\u00f6r det med React och GraphQL.<\/p>\n<p>Jag s\u00e4ger inte att WordPress \u00e4r ett d\u00e5ligt val, men med Gatsby kan du skapa h\u00f6gpresterande webbplatser med React \u2014 vilket \u00e4r en fantastisk kombination.<\/p>\n<h3>Blogg med Gridsome<\/h3>\n<p>\nGridsome f\u00f6r Vue... Okej, vi har redan haft detta med Next\/Nuxt.<br \/>\nMen samma sak g\u00e4ller f\u00f6r Gridsome och Gatsby. B\u00e5da anv\u00e4nder GraphQL som ett datalag, men Gridsome anv\u00e4nder VueJS. Det \u00e4r ocks\u00e5 en fantastisk generator f\u00f6r statiska webbplatser som hj\u00e4lper dig att skapa utm\u00e4rkta bloggar:<\/p>\n<p><img decoding=\"async\" alt=\"Ytterligare 9 projekt f\u00f6r att finslipa dina Front-End-f\u00e4rdigheter\" src=\"\/wp-content\/uploads\/2019\/11\/3d0162d6aeba8481056f4dee9f25808d.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Vad du kommer att l\u00e4ra dig<\/b><\/p>\n<p>Detta projekt kommer att l\u00e4ra dig hur man skapar en enkel blogg f\u00f6r att b\u00f6rja arbeta med Gridsome, GraphQL och Markdown. Det beskriver ocks\u00e5 hur man distribuerar appen via Netlify.<\/p>\n<p><b>Teknisk stack och funktioner<\/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>\nDet h\u00e4r \u00e4r f\u00f6rst\u00e5s inte den mest omfattande handledningen, men den t\u00e4cker de grundl\u00e4ggande koncepten f\u00f6r Gridsome och <noindex><a rel=\"nofollow\" href=\"https:\/\/www.telerik.com\/blogs\/building-a-blog-with-vue-and-markdown-using-gridsome\">Markdown och kan bli en bra utg\u00e5ngspunkt<\/a><\/noindex>.<\/p>\n<h3>En ljudspelare, liknande SoundCloud, med hj\u00e4lp av Quasar.<\/h3>\n<p>\nQuasar \u2014 ett annat Vue-ramverk som kan anv\u00e4ndas f\u00f6r att skapa mobilapplikationer. I detta projekt kommer du att skapa en ljudspelarapp, till exempel:<\/p>\n<p><img decoding=\"async\" alt=\"Ytterligare 9 projekt f\u00f6r att finslipa dina Front-End-f\u00e4rdigheter\" src=\"\/wp-content\/uploads\/2019\/11\/e7acef4f60608d581533c038c61a0752.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Vad du kommer att l\u00e4ra dig<\/b><\/p>\n<p>Medan andra projekt huvudsakligen fokuserar p\u00e5 webbapplikationer, kommer detta att visa dig hur du skapar en mobilapplikation med hj\u00e4lp av Vue och Quasar-ramverket.<br \/>\nDu b\u00f6r redan ha en fungerande Cordova med konfigurerad Android Studio\/Xcode. Om inte, s\u00e5 finns det en l\u00e4nk i guiden till Quasars webbplats d\u00e4r de visar hur man st\u00e4ller in allt.<\/p>\n<p><b>Teknisk stack och funktioner<\/b><\/p>\n<ul>\n<li>Quasar<\/li>\n<li>Vue<\/li>\n<li>Cordova<\/li>\n<li>WaveSurfer<\/li>\n<li>UI Komponenter<\/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\">Ett litet projekt<\/a><\/noindex>, som visar Quasars m\u00f6jligheter f\u00f6r att skapa mobilapplikationer.<br \/>\n<br \/>K\u00e4lla: <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.4 - 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\/sv\/blog\/news\/eshhyo-9-proektov-dlya-ottachivaniya-front-end-masterstva\" \/>\n\t\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.4\" \/>\n\t\t<meta property=\"og:locale\" content=\"sv_SE\" \/>\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\/sv\/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\udd47Ytterligare 9 projekt f\u00f6r att finslipa dina Front-End-f\u00e4rdigheter | ProHoster","description":"Introduktion Oavsett.","canonical_url":"https:\/\/prohoster.info\/sv\/blog\/news\/eshhyo-9-proektov-dlya-ottachivaniya-front-end-masterstva","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"sv_SE","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\/sv\/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\/sv\/wp-json\/wp\/v2\/posts\/52348","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/sv\/wp-json\/wp\/v2\/comments?post=52348"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/sv\/wp-json\/wp\/v2\/posts\/52348\/revisions"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/sv\/wp-json\/wp\/v2\/media?parent=52348"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/sv\/wp-json\/wp\/v2\/categories?post=52348"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/sv\/wp-json\/wp\/v2\/tags?post=52348"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}