{"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\/az\/blog\/novosti-interneta\/eshhyo-9-proektov-dlya-ottachivaniya-front-end-masterstva","title":{"rendered":"Frontend becerilerini geli\u015ftirmek i\u00e7in 9 proje daha","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"<p><img decoding=\"async\" alt=\"Frontend becerilerini geli\u015ftirmek i\u00e7in 9 proje daha\" src=\"\/wp-content\/uploads\/2019\/11\/05c3246e5ca620b5ea66c0542b53f08a.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<\/p>\n<h3>Giri\u015f<\/h3>\n<p>\n\u0130st\u0259r proqramla\u015fd\u0131rmada yeniyetm\u0259 ol ursunuz, ist\u0259rs\u0259 d\u0259 art\u0131q t\u0259cr\u00fcb\u0259li bir inki\u015faf etdirici, bu sah\u0259d\u0259 yeni konsepsiyalar\u0131 v\u0259 dill\u0259ri\/framework-l\u0259ri \u00f6yr\u0259nm\u0259k m\u00fctl\u0259qdir ki, trendl\u0259rl\u0259 ayaqla\u015fas\u0131n\u0131z.<\/p>\n<p>M\u0259s\u0259l\u0259n, React \u2014 Facebook t\u0259r\u0259find\u0259n d\u00f6rd il \u0259vv\u0259l a\u00e7\u0131lm\u0131\u015f kodu il\u0259, art\u0131q b\u00fct\u00fcn d\u00fcnyada JavaScript inki\u015faf etdiricil\u0259rinin birinci se\u00e7imi olub.<\/p>\n<p>Vue v\u0259 Angular da \u00f6z\u00fcn\u00fc do\u011fruldan p\u0259r\u0259sti\u015fkar bazas\u0131na malikdir. H\u0259m\u00e7inin Svelte v\u0259 Next.js, Nuxt.js kimi dig\u0259r universall\u0131 framework-l\u0259r d\u0259 var. Gatsby, Gridsome, Quasar\u2026 v\u0259 daha n\u0259l\u0259r.<\/p>\n<p>JavaScript inki\u015faf etdiricisi kimi \u00f6z\u00fcn\u00fcz\u00fc g\u00f6st\u0259rm\u0259k ist\u0259yirsinizs\u0259, yax\u015f\u0131 k\u00f6hn\u0259 JS-d\u0259n ba\u015fqa m\u00fcxt\u0259lif framework-l\u0259r v\u0259 kitabxanalarla i\u015fl\u0259m\u0259yi bacarmal\u0131s\u0131n\u0131z.<\/p>\n<p>Sizi 2020-ci ild\u0259 \u00f6n t\u0259r\u0259f ustas\u0131 olma\u011f\u0131n\u0131za k\u00f6m\u0259k etm\u0259k \u00fc\u00e7\u00fcn, h\u0259r biri f\u0259rqli framework-l\u0259r\u0259 v\u0259 JavaScript kitabxanalar\u0131na h\u0259sr olunmu\u015f doqquz m\u00fcxt\u0259lif layih\u0259 haz\u0131rlam\u0131\u015fam ki, bunlar\u0131 qura bil\u0259rsiniz v\u0259 portfeliniz\u0259 \u0259lav\u0259 ed\u0259 bil\u0259rsiniz. Yad\u0131ma sal\u0131n ki, he\u00e7 n\u0259 sizi praktiki olaraq \u015feyl\u0259r yaratmaqdan daha \u00e7ox k\u00f6m\u0259k etmir, buna g\u00f6r\u0259 ir\u0259lil\u0259yin, fikrinizi i\u015f\u0259 sal\u0131n v\u0259 bunu m\u00fcmk\u00fcn edin.<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 - veb inki\u015faf\u0131\"><img decoding=\"async\" alt=\"Frontend becerilerini geli\u015ftirmek i\u00e7in 9 proje daha\" src=\"\/wp-content\/uploads\/2019\/11\/4f292db7c47eaa9d6e764f5a595d0edf.jpeg\" style=\"display:block;margin: 0 auto;\" \/><\/a><\/noindex><br clear=\"right\"><br \/>\nM\u0259qal\u0259 EDISON Software \u015firk\u0259tinin d\u0259st\u0259yi il\u0259 t\u0259rc\u00fcm\u0259 edilmi\u015fdir, <noindex><a rel=\"nofollow\" href=\"https:\/\/www.edsd.ru\/virtualnaya-primerochnaya\">multibrend ma\u011fazalar\u0131 \u00fc\u00e7\u00fcn virtual provinciya otaqlar\u0131 yarad\u0131r<\/a><\/noindex>, el\u0259c\u0259 d\u0259 <noindex><a rel=\"nofollow\" href=\"https:\/\/www.edsd.ru\/ru\/uslugi\/testirovanie_po\">proqram t\u0259minat\u0131n\u0131 s\u0131naqdan ke\u00e7irir<\/a><\/noindex>.<\/p><\/blockquote>\n<p><\/p>\n<h3>React il\u0259 (h\u00fccl\u0259rl\u0259) film axtar\u0131\u015f t\u0259tbiqi<\/h3>\n<p>\nBa\u015flamaq \u00fc\u00e7\u00fcn ilk \u015fey, React il\u0259 film axtar\u0131\u015f t\u0259tbiqi yaratmaqd\u0131r. A\u015fa\u011f\u0131da, tamamlanm\u0131\u015f t\u0259tbiqin nec\u0259 g\u00f6r\u00fcn\u0259c\u0259yini g\u00f6st\u0259r\u0259n bir g\u00f6r\u00fcnt\u00fc var:<\/p>\n<p><img decoding=\"async\" alt=\"Frontend becerilerini geli\u015ftirmek i\u00e7in 9 proje daha\" src=\"\/wp-content\/uploads\/2019\/11\/de9873700abc86e1ec63e92704f80dcf.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>N\u0259 \u00f6yr\u0259n\u0259c\u0259ksiniz<\/b><br \/>\nBu t\u0259tbiqi yaradark\u0259n, nisb\u0259t\u0259n yeni API H\u00fccl\u0259rini istifad\u0259 ed\u0259r\u0259k React bacar\u0131qlar\u0131n\u0131z\u0131 inki\u015faf etdir\u0259c\u0259ksiniz. Layih\u0259 n\u00fcmun\u0259sind\u0259 React komponentl\u0259ri, \u00e7oxsayl\u0131 h\u00fccl\u0259r, xarici API v\u0259 \u0259lb\u0259tt\u0259 ki, bir ne\u00e7\u0259 CSS stili istifad\u0259 edilir.<\/p>\n<p><b>Texniki y\u0131\u011f\u0131n v\u0259 x\u00fcsusiyy\u0259tl\u0259r<\/b><\/p>\n<ul>\n<li>H\u00fccl\u0259rl\u0259 React<\/li>\n<li>create-react-app<\/li>\n<li>JSX<\/li>\n<li>CSS<\/li>\n<\/ul>\n<p>\nH\u0259r hans\u0131 bir sinifl\u0259r olmadan, bu layih\u0259l\u0259r siz\u0259 funksional React-\u0131n m\u00fck\u0259mm\u0259l giri\u015f n\u00f6qt\u0259sini t\u0259qdim edir v\u0259 sizi 2020-ci ild\u0259 m\u00fctl\u0259q yard\u0131m ed\u0259c\u0259k. Burada tapa bil\u0259rsiniz <noindex><a rel=\"nofollow\" href=\"https:\/\/www.freecodecamp.org\/news\/how-to-build-a-movie-search-app-using-react-hooks-24eb72ddfaf7\/\">bu layih\u0259nin n\u00fcmun\u0259si<\/a><\/noindex>. T\u0259limatlara \u0259m\u0259l edin v\u0259 ya h\u0259r \u015feyi \u00f6z z\u00f6vq\u00fcn\u00fcz\u0259 uy\u011fun edin.<\/p>\n<h3>Vue il\u0259 s\u00f6hb\u0259t t\u0259tbiqi<\/h3>\n<p>\nSizin \u00fc\u00e7\u00fcn bir dig\u0259r \u0259la layih\u0259 \u2013 sevdiyim JavaScript kitabxanas\u0131 VueJS-d\u0259n istifad\u0259 ed\u0259r\u0259k bir s\u00f6hb\u0259t t\u0259tbiqi yaratmaqd\u0131r. T\u0259tbiq t\u0259xmin\u0259n bel\u0259 g\u00f6r\u00fcn\u0259c\u0259k:<\/p>\n<p><img decoding=\"async\" alt=\"Frontend becerilerini geli\u015ftirmek i\u00e7in 9 proje daha\" src=\"\/wp-content\/uploads\/2019\/11\/3c55136bcf260168f951e923983dc3a0.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>N\u0259 \u00f6yr\u0259n\u0259c\u0259ksiniz<\/b><br \/>\nBu b\u0259l\u0259d\u00e7ilikd\u0259, s\u0131f\u0131rdan Vue t\u0259tbiqi yaratma\u011f\u0131 \u00f6yr\u0259n\u0259c\u0259ksiniz \u2014 komponentl\u0259r yaratmaq, v\u0259ziyy\u0259tl\u0259ri idar\u0259 etm\u0259k, mar\u015frutlar yaratmaq, \u00fc\u00e7\u00fcnc\u00fc t\u0259r\u0259f xidm\u0259tl\u0259rin\u0259 qo\u015fulmaq v\u0259 h\u0259tta autentifikasiya etm\u0259yi \u00f6yr\u0259nm\u0259k.<\/p>\n<p><b>Texniki y\u0131\u011f\u0131n v\u0259 x\u00fcsusiyy\u0259tl\u0259r<\/b><\/p>\n<ul>\n<li>Typescript.<\/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>\nBu, Vue il\u0259 i\u015fl\u0259m\u0259y\u0259 ba\u015flamaq v\u0259 ya m\u00f6vcud bacar\u0131qlar\u0131n\u0131z\u0131 inki\u015faf etdirm\u0259k \u00fc\u00e7\u00fcn h\u0259qiq\u0259t\u0259n \u0259la bir layih\u0259dir ki, 2020-ci ild\u0259 inki\u015faf etm\u0259y\u0259 ba\u015flayas\u0131n\u0131z. Burada tapa bil\u0259rsiniz <noindex><a rel=\"nofollow\" href=\"https:\/\/www.sitepoint.com\/pusher-vue-real-time-chat-app\/\">bu b\u0259l\u0259d\u00e7i<\/a><\/noindex>.<\/p>\n<h3>Angular 8 il\u0259 g\u00f6z\u0259l hava proqnozu t\u0259tbiqi<\/h3>\n<p>\nBu n\u00fcmun\u0259 siz\u0259 Angular 8 il\u0259 g\u00f6z\u0259l bir hava proqnozu t\u0259tbiqi yaratma\u011fa k\u00f6m\u0259k ed\u0259c\u0259k:<\/p>\n<p><img decoding=\"async\" alt=\"Frontend becerilerini geli\u015ftirmek i\u00e7in 9 proje daha\" src=\"\/wp-content\/uploads\/2019\/11\/93575fb69c667f04a00c58bfeb8b9699.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>N\u0259 \u00f6yr\u0259n\u0259c\u0259ksiniz<\/b><br \/>\nBu layih\u0259 siz\u0259 m\u0259nb\u0259d\u0259n t\u0259tbiql\u0259r yaratma\u011f\u0131n d\u0259y\u0259rli bacar\u0131qlar\u0131n\u0131 \u00f6yr\u0259d\u0259c\u0259k - layih\u0259l\u0259ndirm\u0259d\u0259n ba\u015flayaraq, inki\u015faf etdirilm\u0259si v\u0259 t\u0259dar\u00fck\u0259 haz\u0131r bir t\u0259tbiq\u0259 q\u0259d\u0259r.<\/p>\n<p><b>Texniki y\u0131\u011f\u0131n v\u0259 x\u00fcsusiyy\u0259tl\u0259r<\/b><\/p>\n<ul>\n<li>Angular 8<\/li>\n<li>Firebase<\/li>\n<li>Server t\u0259r\u0259fd\u0259n render etm\u0259<\/li>\n<li>CSS il\u0259 grid v\u0259 Flexbox<\/li>\n<li>Mobil dostu v\u0259 reaksiya ver\u0259n<\/li>\n<li>Qaranl\u0131q rejim<\/li>\n<li>G\u00f6z\u0259l interfeys<\/li>\n<\/ul>\n<p>\nM\u0259ni bu \u0259hat\u0259li layih\u0259d\u0259 h\u0259qiq\u0259t\u0259n \u0259n \u00e7ox b\u0259y\u0259ndiyim m\u0259qam odur ki, siz \u015feyl\u0259ri izolyasiyal\u0131 \u00f6yr\u0259nmirsiniz. Bunun \u0259v\u0259zin\u0259, siz t\u0259sis s\u0259n\u0259dind\u0259n son yerl\u0259\u015fdirilm\u0259y\u0259 q\u0259d\u0259r olan inki\u015faf prosesini \u00f6yr\u0259nirsiniz.<\/p>\n<h3>Svelte il\u0259 To-Do t\u0259tbiqi<\/h3>\n<p>\nSvelte komponent yana\u015fmas\u0131nda yeni bir u\u015faq kimidir - \u0259n az\u0131ndan React, Vue v\u0259 Angular-a b\u0259nz\u0259yir. V\u0259 bu 2020-ci ilin \u0259n isti yenilikl\u0259rind\u0259n biridir.<\/p>\n<p>To-Do t\u0259tbiql\u0259ri m\u00fctl\u0259q \u0259n \u0259sas m\u00f6vzu deyil, amma bu, Svelte bacar\u0131qlar\u0131n\u0131z\u0131 inki\u015faf etdirm\u0259k \u00fc\u00e7\u00fcn siz\u0259 k\u00f6m\u0259k ed\u0259c\u0259k. Bel\u0259 g\u00f6r\u00fcn\u0259c\u0259k:<\/p>\n<p><img decoding=\"async\" alt=\"Frontend becerilerini geli\u015ftirmek i\u00e7in 9 proje daha\" src=\"\/wp-content\/uploads\/2019\/11\/1d2d414f5acbb3cfd0df5bf7ff29befd.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>N\u0259 \u00f6yr\u0259n\u0259c\u0259ksiniz<\/b><br \/>\nBu t\u0259limatda siz Svelte 3 vasit\u0259sil\u0259 bir t\u0259tbiq yaratma\u011f\u0131, ba\u015flan\u011f\u0131cdan sona q\u0259d\u0259r \u00f6yr\u0259n\u0259c\u0259ksiniz. Siz komponentl\u0259r, stil dizayn\u0131 v\u0259 hadis\u0259 idar\u0259edicil\u0259rini istifad\u0259 ed\u0259c\u0259ksiniz.<\/p>\n<p><b>Texniki y\u0131\u011f\u0131n v\u0259 x\u00fcsusiyy\u0259tl\u0259r<\/b><\/p>\n<ul>\n<li>Svelte 3<\/li>\n<li>Bile\u015fenler<\/li>\n<li>CSS il\u0259 stil dizayn\u0131<\/li>\n<li>ES 6 sintaksisi<\/li>\n<\/ul>\n<p>\nSvelte il\u0259 ba\u011fl\u0131 o q\u0259d\u0259r d\u0259 \u00e7ox yax\u015f\u0131 ba\u015flan\u011f\u0131c layih\u0259l\u0259ri yoxdur, buna g\u00f6r\u0259 <noindex><a rel=\"nofollow\" href=\"https:\/\/medium.com\/codingthesmartway-com-blog\/building-a-svelte-3-todo-app-from-start-to-deployment-1737f72c23a6\">m\u0259n bu yax\u015f\u0131 variant\u0131 tapd\u0131m<\/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 React t\u0259tbiql\u0259ri yaratmaq \u00fc\u00e7\u00fcn server t\u0259r\u0259fd\u0259n render etm\u0259ni d\u0259st\u0259kl\u0259y\u0259n \u0259n populyar \u00e7\u0259r\u00e7iv\u0259dir.<\/p>\n<p>Bu layih\u0259 siz\u0259 a\u015fa\u011f\u0131dak\u0131 kimi bir elektron ticar\u0259t t\u0259tbiqi yaratma\u011f\u0131 g\u00f6st\u0259r\u0259c\u0259k:<\/p>\n<p><img decoding=\"async\" alt=\"Frontend becerilerini geli\u015ftirmek i\u00e7in 9 proje daha\" src=\"\/wp-content\/uploads\/2019\/11\/a848293ad9952a3c52bf8d059bf55ab9.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>N\u0259 \u00f6yr\u0259n\u0259c\u0259ksiniz<\/b><br \/>\nBu layih\u0259d\u0259 siz Next.js il\u0259 inki\u015faf etm\u0259yi \u00f6yr\u0259n\u0259c\u0259ksiniz - yeni s\u0259hif\u0259l\u0259r v\u0259 komponentl\u0259r yaratmaq, m\u0259lumatlar\u0131 \u00e7\u0259km\u0259k v\u0259 Next t\u0259tbiqini stil dizayn\u0131 v\u0259 yerl\u0259\u015fdirm\u0259k.<\/p>\n<p><b>Texniki y\u0131\u011f\u0131n v\u0259 x\u00fcsusiyy\u0259tl\u0259r<\/b><\/p>\n<ul>\n<li>Next.js<\/li>\n<li>Komponentl\u0259r v\u0259 s\u0259hif\u0259l\u0259r<\/li>\n<li>M\u0259lumatlar\u0131n Se\u00e7ilm\u0259si<\/li>\n<li>Stil dizayn\u0131<\/li>\n<li>Layih\u0259nin yerl\u0259\u015fdirilm\u0259si<\/li>\n<li>SSR v\u0259 SPA<\/li>\n<\/ul>\n<p>\nH\u0259mi\u015f\u0259 yeni bir \u015fey \u00f6yr\u0259nm\u0259k \u00fc\u00e7\u00fcn elektron ticar\u0259t t\u0259tbiqi kimi real bir n\u00fcmun\u0259 sahibi olmaq g\u00f6z\u0259ldir. Siz <noindex><a rel=\"nofollow\" href=\"https:\/\/snipcart.com\/blog\/next-js-ecommerce-tutorial\">bu t\u0259limat\u0131 burada tapa bil\u0259rsiniz<\/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 \u00fc\u00e7\u00fcn, Next.js-in React \u00fc\u00e7\u00fcn olan\u0131d\u0131r: server t\u0259r\u0259fd\u0259n render etm\u0259 imkanlar\u0131n\u0131 v\u0259 t\u0259k s\u0259hif\u0259li t\u0259tbiql\u0259ri birl\u0259\u015fdirm\u0259k \u00fc\u00e7\u00fcn m\u00fck\u0259mm\u0259l bir \u00e7\u0259r\u00e7iv\u0259.<br \/>\nYaradaca\u011f\u0131n\u0131z son t\u0259tbiq bel\u0259 g\u00f6r\u00fcn\u0259c\u0259k:<\/p>\n<p><img decoding=\"async\" alt=\"Frontend becerilerini geli\u015ftirmek i\u00e7in 9 proje daha\" src=\"\/wp-content\/uploads\/2019\/11\/ba05c24c81705c454c32d363e9a74fe5.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>N\u0259 \u00f6yr\u0259n\u0259c\u0259ksiniz<\/b><\/p>\n<p>Bu layih\u0259 n\u00fcmun\u0259sind\u0259 siz Nuxt.js istifad\u0259 ed\u0259r\u0259k tam i\u015f veb sayt\u0131 yaratma\u011f\u0131 \u00f6yr\u0259n\u0259c\u0259ksiniz \u2014 ba\u015flan\u011f\u0131c t\u0259nziml\u0259m\u0259sind\u0259n son yerl\u0259\u015fdirm\u0259y\u0259 q\u0259d\u0259r.<\/p>\n<p>O, Nuxt-un t\u0259klif ed\u0259 bil\u0259c\u0259yi \u00e7oxsayl\u0131 maraql\u0131 funksiyalar\u0131, m\u0259s\u0259l\u0259n, s\u0259hif\u0259l\u0259r v\u0259 komponentl\u0259r, el\u0259c\u0259 d\u0259 SCSS il\u0259 stil dizayn\u0131 istifad\u0259 edir.<\/p>\n<p><b>Texniki y\u0131\u011f\u0131n v\u0259 x\u00fcsusiyy\u0259tl\u0259r<\/b><\/p>\n<ul>\n<li>Nuxt.js<\/li>\n<li>Komponentl\u0259r v\u0259 s\u0259hif\u0259l\u0259r<\/li>\n<li>Storyblok modulu<\/li>\n<li>Mixins<\/li>\n<li>Vuex il\u0259 v\u0259ziyy\u0259t idar\u0259\u00e7iliyi<\/li>\n<li>SCSS il\u0259 stil dizayn\u0131<\/li>\n<li>Nuxt middleware<\/li>\n<\/ul>\n<p>\n<noindex><a rel=\"nofollow\" href=\"https:\/\/www.storyblok.com\/tp\/nuxt-js-multilanguage-website-tutorial\">Bu, h\u0259qiq\u0259t\u0259n, fantastik bir layih\u0259dir.<\/a><\/noindex>, hans\u0131 bir \u00e7ox m\u00f6ht\u0259\u015f\u0259m imkanlar\u0131 \u00f6z\u00fcnd\u0259 birl\u0259\u015fdirir Nuxt.js. \u015e\u0259xs\u0259n m\u0259n Nuxt il\u0259 i\u015fl\u0259m\u0259yi sevir\u0259m, ona g\u00f6r\u0259 d\u0259 onu s\u0131nama\u011f\u0131 t\u00f6vsiy\u0259 edir\u0259m, \u00e7\u00fcnki bu da sizi m\u00fck\u0259mm\u0259l Vue inki\u015faf etdiricisi ed\u0259c\u0259k.<\/p>\n<h3>Gatsby il\u0259 Blog<\/h3>\n<p>\nGatsby - React v\u0259 GraphQL istifad\u0259 ed\u0259n m\u00fck\u0259mm\u0259l statik sayt generatorudur. Bu layih\u0259nin n\u0259tic\u0259sidir:<\/p>\n<p><img decoding=\"async\" alt=\"Frontend becerilerini geli\u015ftirmek i\u00e7in 9 proje daha\" src=\"\/wp-content\/uploads\/2019\/11\/4a51e59e1983da87d2110f8b06e29e33.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>N\u0259 \u00f6yr\u0259n\u0259c\u0259ksiniz<\/b><\/p>\n<p>Bu b\u0259l\u0259d\u00e7id\u0259 Gatsby-d\u0259n istifad\u0259 ed\u0259r\u0259k \u00f6z yaz\u0131lar\u0131n\u0131z\u0131 yazmaq \u00fc\u00e7\u00fcn istifad\u0259 ed\u0259c\u0259yiniz bir blog yaratma\u011f\u0131 \u00f6yr\u0259n\u0259c\u0259ksiniz, React v\u0259 GraphQL istifad\u0259 ed\u0259r\u0259k.<\/p>\n<p><b>Texniki y\u0131\u011f\u0131n v\u0259 x\u00fcsusiyy\u0259tl\u0259r<\/b><\/p>\n<ul>\n<li>Gatsby<\/li>\n<li>React<\/li>\n<li>GraphQL<\/li>\n<li>Plaginl\u0259r v\u0259 m\u00f6vzular<\/li>\n<li>MDX\/Markdown<\/li>\n<li>Bootstrap CSS<\/li>\n<li>\u015eablonlar<\/li>\n<\/ul>\n<p>\n\u018fg\u0259r bir vaxtlar blog a\u00e7maq ist\u0259misinizs\u0259, <noindex><a rel=\"nofollow\" href=\"https:\/\/blog.bitsrc.io\/how-to-build-a-blog-with-gatsby-and-boostrap-d1270212b3dc\">bu m\u00fck\u0259mm\u0259l bir n\u00fcmun\u0259dir<\/a><\/noindex> React v\u0259 GraphQL istifad\u0259 ed\u0259r\u0259k onu nec\u0259 etm\u0259yinizi g\u00f6st\u0259rir.<\/p>\n<p>M\u0259n demir\u0259m ki, WordPress pis se\u00e7imdir, amma Gatsby il\u0259 siz React istifad\u0259 ed\u0259r\u0259k y\u00fcks\u0259k performansl\u0131 saytlar yarada bil\u0259rsiniz - bu, m\u00f6ht\u0259\u015f\u0259m bir kombinasiya.<\/p>\n<h3>Gridsome il\u0259 Blog<\/h3>\n<p>\nGridsome Vue \u00fc\u00e7\u00fcn... Yax\u015f\u0131, art\u0131q bunu Next\/Nuxt il\u0259 etmi\u015fdik.<br \/>\nAmma Gridsome v\u0259 Gatsby \u00fc\u00e7\u00fcn eyni \u015fey do\u011frudur. H\u0259r ikisi GraphQL-i m\u0259lumat t\u0259b\u0259q\u0259si kimi istifad\u0259 edir, amma Gridsome VueJS-d\u0259n istifad\u0259 edir. Bu, siz\u0259 m\u00fck\u0259mm\u0259l bloglar yaratma\u011fa k\u00f6m\u0259k ed\u0259c\u0259k dig\u0259r bir m\u00f6ht\u0259\u015f\u0259m statik sayt generatorudur:<\/p>\n<p><img decoding=\"async\" alt=\"Frontend becerilerini geli\u015ftirmek i\u00e7in 9 proje daha\" src=\"\/wp-content\/uploads\/2019\/11\/3d0162d6aeba8481056f4dee9f25808d.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>N\u0259 \u00f6yr\u0259n\u0259c\u0259ksiniz<\/b><\/p>\n<p>Bu layih\u0259 siz\u0259 Gridsome, GraphQL v\u0259 Markdown il\u0259 i\u015fl\u0259m\u0259k \u00fc\u00e7\u00fcn sad\u0259 bir blog yaratma\u011f\u0131 \u00f6yr\u0259d\u0259c\u0259k. Eyni zamanda t\u0259tbiqi Netlify vasit\u0259sil\u0259 yerl\u0259\u015fdirm\u0259k bar\u0259d\u0259 d\u0259 m\u0259lumat ver\u0259c\u0259k.<\/p>\n<p><b>Texniki y\u0131\u011f\u0131n v\u0259 x\u00fcsusiyy\u0259tl\u0259r<\/b><\/p>\n<ul>\n<li>Gridsome<\/li>\n<li>Typescript.<\/li>\n<li>GraphQL<\/li>\n<li>Markdown<\/li>\n<li>Netlify<\/li>\n<\/ul>\n<p>\nBu, \u0259lb\u0259tt\u0259 ki, \u0259n tam b\u0259l\u0259d\u00e7i deyil, amma Gridsome v\u0259 <noindex><a rel=\"nofollow\" href=\"https:\/\/www.telerik.com\/blogs\/building-a-blog-with-vue-and-markdown-using-gridsome\">Markdown anlay\u0131\u015flar\u0131n\u0131 ba\u015fa d\u00fc\u015fm\u0259k \u00fc\u00e7\u00fcn yax\u015f\u0131 bir ba\u015flan\u011f\u0131c ola bil\u0259r<\/a><\/noindex>.<\/p>\n<h3>Quasar il\u0259 SoundCloud-a b\u0259nz\u0259r audio pleyer<\/h3>\n<p>\nQuasar - mobil t\u0259tbiql\u0259r yaratmaq \u00fc\u00e7\u00fcn istifad\u0259 edil\u0259 bil\u0259n ba\u015fqa bir Vue \u00e7\u0259r\u00e7iv\u0259sidir. Bu layih\u0259d\u0259 siz a\u015fa\u011f\u0131dak\u0131lar kimi bir audio pleyer t\u0259tbiqi yaradacaqs\u0131n\u0131z:<\/p>\n<p><img decoding=\"async\" alt=\"Frontend becerilerini geli\u015ftirmek i\u00e7in 9 proje daha\" src=\"\/wp-content\/uploads\/2019\/11\/e7acef4f60608d581533c038c61a0752.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>N\u0259 \u00f6yr\u0259n\u0259c\u0259ksiniz<\/b><\/p>\n<p>Ba\u015fqa layih\u0259l\u0259r \u0259sas\u0259n veb t\u0259tbiql\u0259rin\u0259 y\u00f6n\u0259lirs\u0259, bu siz\u0259 Vue v\u0259 Quasar \u00e7\u0259r\u00e7iv\u0259sind\u0259n istifad\u0259 ed\u0259r\u0259k mobil t\u0259tbiq yaratma\u011f\u0131 g\u00f6st\u0259r\u0259c\u0259k.<br \/>\nArt\u0131q sizd\u0259 i\u015fl\u0259y\u0259n Cordova il\u0259 konfiqurasiya edilmi\u015f Android Studio\/Xcode olmal\u0131d\u0131r. \u018fg\u0259r yoxdursa, b\u0259l\u0259d\u00e7id\u0259 Quasar-\u0131n r\u0259smi sayt\u0131na ke\u00e7id var, orada h\u0259r \u015feyi nec\u0259 konfiqurasiya ed\u0259c\u0259yinizi g\u00f6st\u0259rirl\u0259r.<\/p>\n<p><b>Texniki y\u0131\u011f\u0131n v\u0259 x\u00fcsusiyy\u0259tl\u0259r<\/b><\/p>\n<ul>\n<li>Quasar<\/li>\n<li>Typescript.<\/li>\n<li>Cordova<\/li>\n<li>WaveSurfer<\/li>\n<li>UI Komponentl\u0259ri<\/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\">Ki\u00e7ik bir layih\u0259<\/a><\/noindex>, Quasar-\u0131n mobil t\u0259tbiql\u0259r yaratmaq imkanlar\u0131n\u0131 n\u00fcmayi\u015f etdirir.<br \/>\n<br \/>M\u0259nb\u0259: <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 5.0.0.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\/az\/blog\/novosti-interneta\/eshhyo-9-proektov-dlya-ottachivaniya-front-end-masterstva\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.0.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"az_AZ\" \/>\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\/az\/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 Front-End bacar\u0131\u011f\u0131n\u0131z\u0131 inki\u015faf etdirm\u0259k \u00fc\u00e7\u00fcn daha 9 layih\u0259 | ProHoster","description":"Giri\u015f H\u0259r halda.","canonical_url":"https:\/\/prohoster.info\/az\/blog\/novosti-interneta\/eshhyo-9-proektov-dlya-ottachivaniya-front-end-masterstva","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"az_AZ","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\/az\/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","focus_keyword":null,"additional_keywords":null,"truseo_locale":null},"gt_translate_keys":[{"key":"link","format":"url"}],"_links":{"self":[{"href":"https:\/\/prohoster.info\/az\/wp-json\/wp\/v2\/posts\/52348","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/az\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/az\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/az\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/az\/wp-json\/wp\/v2\/comments?post=52348"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/az\/wp-json\/wp\/v2\/posts\/52348\/revisions"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/az\/wp-json\/wp\/v2\/media?parent=52348"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/az\/wp-json\/wp\/v2\/categories?post=52348"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/az\/wp-json\/wp\/v2\/tags?post=52348"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}