{"componentChunkName":"component---src-templates-post-post-jsx","path":"/blog/hello-world-rolwins-first-blog","result":{"data":{"markdownRemark":{"html":"<p>Hello World 🌎 - I would like to talk 🔈 about my self in this article. Let's start this journey together. My name is Rolwin and I'm a full-stack web developer 🕸️. I have been an opensource contributor for a very long time since 2016. Currently I'm a part of Gatsby organization contributing to <a href=\"https://www.gatsbyjs.org/\" target=\"_blank\" rel=\"nofollow\">Gatsby.js</a>.</p>\n<p>The world of <code class=\"language-text\">World Wide Web</code> 🌐 had always fascinated me for a very long time. Ever since my only dream 🙃 was to architect real-time applications that millions of people use in real-time, for instance a 🚗 taxi booking app, a food delivery 🍔 app or some online 💵 payment app. I strongly believe the world of <code class=\"language-text\">Web Technology</code> is going to transform the world in the near future. Currently a lot of  🕸️ web apps that are built behave more like mobile 📱 app and show real-time data. In the near future the web is going to be a huge setup that will link most of the IoT devices together.</p>\n<p>In my early teens 👦🏻 I was not a good coder 👨🏽‍💻 as such. I could hardly write a <code class=\"language-text\">C Program</code> and could not even understand many use-cases 😷 of these programs. Probably because I was not much of a book worm 🐛. Things changed in the year 2015 and my fascination towards programming increased and in the year 2016 I started programming the <code class=\"language-text\">Web</code>. Today I'm a full-stack web developer 👨🏽‍💻 working with multiple technologies. Currently I work with mostly <code class=\"language-text\">Javascript</code> tech stacks like <code class=\"language-text\">ReactJS</code> and <code class=\"language-text\">NodeJS</code>. I'm open to discussions on various Javascript technologies. I will try to update my blog as much as possible so that many of you can get an idea of the latest trends in technologies. </p>","timeToRead":1,"frontmatter":{"title":"Hello World - Rolwin's first blog 😇","date":"20 Dec 2018","tags":["javascript","html","css"],"path":"blog/hello-world-rolwins-first-blog","excerpt":"Blogging and writing about tech stacks is always been my thing. I like to experiment with different technologies and write my views on them. Web technologies has always been my passion. Check my blog for codebits on various web technologies.","cover":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='297'%20viewBox='0%200%20400%20297'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%2029v29h3a6118%206118%200%2001171-25l10-1v-7l-3-16-1-9h-14c-12%200-14%200-14%202h-1c0-2-3-2-52-2a873%20873%200%2000-63%201L17%200H0v29M270%208l1%207-2-1h-4c-2%200-5-5-3-6l-1-2h-4c1%203%200%203-2%201-2-1-2-1-1%201l-1%203-1-2-1-1c-1-1-5%201-5%202s-2%201-6-1l-1%202v2l1%202c0%202%200%202-1%201h-2c-2%201-2%201-3-1l-3-2h-3l-6%201-3%201-2%201-2%201c-3%201-3%202-3%204%200%203%200%203-1%202s-1-1-3%201l-3%204-9%203A5943%205943%200%20010%2061a2002%202002%200%200190-10c-2%203-4-4%208%2053%2011%2054%2012%2058%2013%2058a1581%201581%200%200076-13l-2%205-4%2010-2%2010-3%2016v11h7c8%200%2018%203%2019%205%201%201-2%2012-4%2013l-1%203-2%205c-2%202-3%204-3%208%200%206-1%207-3%207h-8l-7-1h-7l2-7c3-8%203-13%200-13l-6%202a4911%204911%200%2000-42%2011c-3%200-3%200-3%203%200%206%201%2011%203%2011l1%202c-1%201%200%203%202%205%203%203%203%205%200%207l-2%204c0%202-1%203-2%203-3%201-4%201-4-5a266%20266%200%2000-4-24l-1-4-6%201-5-1%203-1v-1l-15%203-77%2013-10%202-1%2013%201%2014a671%20671%200%200041-10v-2c1-2%204%200%204%202s0%202%204%201l5-2%2014-2%2035-5c4%200%204%200%204%202s0%202%201%201a256%20256%200%20008%2030l11-8c5-4%2034-13%2036-11%201%201-1%203-7%206l-14%2010-6%206h103l104-1c2-1%205-8%204-8l2-1%204-3%201-2%201-2h2c2%200%202%200%201-1l7-2h10l-2%208-3%209-1%203h30v-41c0%205%200%205-4%206-6%202-12%202-16%201h-6l-10%202a942%20942%200%2000-59%208c-4%200-5%202-1%202%201%200%202%200%201%202l-1%201h-2l-11%202-12%202c-14%202-24-1-26-9-2-4-2-4-12-3-4%201-4%203%200%203l3%201v3h-1l-4-2-6-2c-9-1-15-5-8-5%204%200%2012-3%2012-5l2-2c2-2%201-2-3-4h-9l-9%201c-8%200-9%200-12-2l-5-2c-2%200-5-3-5-5l5-3c1%201%2013-1%2015-2%202-2%203-2%208-1l12%202c3%200%207%202%2015%206%2015%2010%2015%2010%2025%2010%2019-1%2052-8%2065-14%2026-11%2030-14%2024-17l-3-4-2-4-2-3-2-4c-1-1-1-2%204-6%206-5%2018-11%2024-12%206%200%206%200%2014%2021%202%203%202%202%202-19v-22l-5%201c-6%200-6%200-10-8l-2-2c0%203-7%206-9%204l-2-1%201%202v2c-2%200-3-2-3-4l2-1c6-3%208-5%207-7l1-1c2%201%203-2%202-5l-2-4v-5l-2-9c0-7-3-17-3-13%200%202%200%202-1%200l-1-4v-2l1%202c1%201%201%201%201-1l-2-3-1-3c1-2%200-3-1-3h-1c0-3-7-10-13-12-9-4-21-6-40-6-18%200-24%201-24%203l4%203%204%203%202%203%203%203c0%203-6%209-7%209h-2l1%201c1%200-3%205-8%208-4%203-5%203-1-1%202-2%202-3%201-4v-2c-2-1-2-1-2%202v1l-1-17c1-2%200-4-3-6l-3-3-3%202-3%203v3l-2%206c-1%202-1%202-1%200s-1-3-3-1l-4%201-3%201v-5c1-7%203-14%207-21l3-5%201%202%202%206c0%205%202%205%204%201v-7l-2-7c-1-3-1-4-3-3l-1-1%203-1%201-1%202%201c1%202%202%202%205%202%205-1%205-4%202-6-4-2-2-6%202-4%202%201%202%201%202-1-1-3-4-4-7-1-3%204-4%203-1-1l4-3c3%200%203-1%202-11l-1-10-1-1v-2l-1-1-1-3c0-2%200-2-2-2-1%201-2%200-2-1l-2-3c-1-2%200-2%208-3l10-2h-11l-8%202-2%201-1-2c0-1%203-2%2011-3l12-3c1-2%203-3%203-1%200%203%2014%200%2019-4l9-3%205-1%203-1c1-1%202%200%202%201h2l2%201-20%206%203-2%203-2-4%201c-3%201-4%201-3%203%202%201%201%201-11%203-10%202-12%202-11%204a100%20100%200%200029-6l17-4a1030%201030%200%200123-8l-10%201h-24l-31-1h-33v8m122-3a700%20700%200%20013%2047v6l1%208%201%2012%202%2012%201%207V86l-1-18a1960%201960%200%2001-7-63M73%2039a1730%201730%200%2001-22%205c1%202%2034-3%2034-5%201-2%200-2-12%200m84%2015l-3%201-2%201-1%201-1%201-1%203c-3%202%202%204%207%203%206-1%207-3%201-2-4%200-4%200-3-1l5-2%202-1%209-2%2010-2c0-1-7-1-15%201-4%201-5%200-5-1h-3m-52%205l3%201h4l-4%201c-4%201-5%202-2%202l3%201%202%201v1c-2%201-2%201%200%201h3l-3%201-1%201%201%202%201%201v8c-1%201%200%201%201%201%202%200%202%200%201%201l-1%201v2c-1%201-1%201%201%201v2c2%200%202%203-1%206s-3%204%203%204c2%200%202%200%201%201s-1%203%201%204l-1%201h-2l2%201v4l1%201v1c-1%201-1%201%201%201h2l-2%201c-2%200-2%201-1%201v2l1%201v1c-1%201-1%201%201%201s2%200%201%201c-2%200-2%201-1%203v9l1%202%201%201v1c-1%201-1%201%201%201l1%201c-2%201-2%204%200%204v1c-2%201-2%201%200%201s2%200%201%201l-3%202-2%201c0-2-1-2-2-2-1%201-2%204%200%206a685%20685%200%200075-16l-12%202a342%20342%200%2001-26%205h-2l-9%201-8%201-3%201-2%201v-1l1-2%201-2c2%200%202%200%200-1-3%200-4-2-1-3%203%200%202-2-1-1l-2-1%201-2%201-1-1-1c-3%200-2-3%200-3%201-1%201-1-1-1l-2-1-1-1-2-2c-1-3%200-3%202-3s4-2%201-2v-3l1-2%202-2h-2l-2-1%202-2%202-1-4-1-4-1%201-1%201-1-2-1-2-1%202-2%201-1v-1l1-1-3-1h-3c0-1%206-2%208-1%202%200%202-2%201-3s3-1%208-1l2-2-1-1-1-1-1-1c-1-1%200-1%202-1%203%200%204-2%201-2l2-1%203-1h-4c-3%200-3%200-1-1s0-1-4-1h-5l2-1h-3c-2%200-2%200-1-1l-5-1h-3l1-1c0-1%203-2%2010-3l9-2-5-1h-4v-2l1-2%203-1%204-1-4-1h-3c3%200%202-2%200-2-6%202-14%202-14%201l-3-1c-1%200-2%200-1-1l-3-1-4%201m69%205l-5%201-5%201h-6c-10%202-9%202-9%206l1%205h4v-3h4l1%202c1%201%2025-3%2025-4h-2l-3-1%202-1c1%201%205-2%204-3l1-2c1-1-11-2-12-1m32%2012l2%207c2%203%202%205%201%207l-1%205%201-1c1-3%203-4%203-2%200%201%208%204%2013%204l9-2c6-4%2018-8%2023-8%206-1%207%201%202%206-3%203-4%206-2%206%203%200%2013-19%2011-22-1-2-13-3-16-1l-6%202-3%201c-1%202-11%201-11%200h-1l-3%202v2c0%204-2%206-6%204l-4-1-2-1h-1l-2-2-2-2-1-1-2-3c-2-2-2-2-2%200m-26%203h-1c-1-1-13%200-25%203-2%200-2%200-1-1s1-1-2-1l-3%201%201%201c2-1%202%200%203%204%200%205%200%205%203%205s4-1%202-3c-3-3-2-3%201-3%202%200%202%201%202%203s1%202%203%202l19-4c1-1%200-1-1-1-2%200-2%200-1-1l1-2c-1-1%202-4%203-3l-1%202v1l1%201%201%203%201-1h2l4-1c0-1-1-2-3-2s-2-1-2-3c0-3-6-3-7%200m11%2010l-18%203c-22%203-21%203-19%206%201%201%2013-1%2015-3l13-3c6%200%2014-2%2014-3l-1-1-4%201m16%2011c-1%205-1%205-11%207a481%20481%200%2000-23%202l24-5a314%20314%200%2000-42%208l2%201-2%201%201%201c2%201%202%201%201%203l-1%201%202%201c1%201%2013-1%2013-2h-7c-3%201-4%200-1-2%201-2%207-3%2031-7%2013-2%2014-2%2014-9%200-5-1-5-1%200m-25%2021c-27%204-27%204-26%206s30-3%2036-5l10-3%208-2-28%204m3%207l-16%201c-11%201-13%202-7%204%204%201%206%204%203%204l-1%201c1%201%2012-1%2012-3l3-1c2%200%202-1%202-2l2-2v2l2%201%202-2%202-2c1-1%202%200%202%201h-1l-2%201h7l1-2c0-3%200-3-11-1m80%2060l-4%202-4-2c-6-3-9-1-9%206%200%204%200%205-2%206-6%202-7%209-3%2011%202%200%202%201%201%202-2%206%200%209%207%207h7c6%204%2012%201%2010-5%200-2%200-3%204-7%205-5%205-7%200-9-3-2-3-3-3-6%201-4-1-4-1%200-1%204-4%204-5%201%200-3%203-6%206-6%201%201%202-2%200-2l-4%202m-9%2013c-3%205-2%2011%202%2011s6-4%206-9c-1-5-6-6-8-2'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.3513513513513513,"src":"/static/27dc3a779cdfe1f4f30ec2caf3c3fe88/a7715/rolwin.jpg","srcSet":"/static/27dc3a779cdfe1f4f30ec2caf3c3fe88/8f7df/rolwin.jpg 250w,\n/static/27dc3a779cdfe1f4f30ec2caf3c3fe88/0f3a1/rolwin.jpg 500w,\n/static/27dc3a779cdfe1f4f30ec2caf3c3fe88/a7715/rolwin.jpg 1000w,\n/static/27dc3a779cdfe1f4f30ec2caf3c3fe88/37d86/rolwin.jpg 1500w,\n/static/27dc3a779cdfe1f4f30ec2caf3c3fe88/a41d1/rolwin.jpg 2000w,\n/static/27dc3a779cdfe1f4f30ec2caf3c3fe88/b4640/rolwin.jpg 2034w","sizes":"(max-width: 1000px) 100vw, 1000px"}}}}},"allMarkdownRemark":{"edges":[{"node":{"frontmatter":{"path":"blog/react–the-future-of-web-frontend","title":"React – The Future Of Web Frontend","tags":["reactjs","javascript","typescript","html","css"],"excerpt":"Working with ReactJS - A library by facebook was a great experience for me. React has made building web apps easy by making use of reusable components. This is clearly my viewpoint about the library.","cover":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='225'%20viewBox='0%200%20400%20225'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%20113v112h401V0H0v113m65-36c-2%203-3%209-1%2019%200%202%200%203-5%204-7%203-13%209-13%2013s5%209%2012%2011l6%203-1%206c-3%2018%208%2023%2022%2011l4-3%203%203c12%2011%2022%208%2022-6v-6l-1-6%204-1c18-5%2018-19%201-24l-5-3%201-6c2-15-6-21-17-14l-6%204-2%202-3-2c-6-6-16-9-21-5m3%203c-1%202-2%2010-1%2015%201%203%202%203%2011%201%202%200%208-8%207-10-5-5-14-9-17-6m29%203l-6%204%203%204%204%205%2011%201%201-7c2-11-3-14-13-7m53%206c-2%202-2%203-2%2024%200%2026%200%2027%207%2027%204%200%205-2%205-12v-9h8c9%200%2012%202%2012%209%200%209%202%2012%208%2012%204%200%205-3%204-8l-1-9c0-4-1-6-4-8-2-1-2-1%200-2%208-4%208-18-1-24-4-3-33-3-36%200m183%202l-1%205c0%204%200%205-3%206-4%201-4%205%200%206h3v14c0%2013%201%2014%203%2016%204%204%2016%202%2016-2%200-2-3-4-6-4h-2v-24h3l4-1c1-3%200-5-4-5-3%200-3%200-3-3%200-7-2-9-5-9l-5%201m-173%2012v7h9c10%200%2012-1%2012-7%200-5-2-6-12-7h-9v7m-80-1l-4%207-2%204%203%206c4%206%205%207%2012%207%206%200%209-3%2012-10l2-4-3-6-4-5-7-1c-7%200-8%200-9%202m135-1c-17%204-21%2029-6%2037%2012%206%2031-1%2026-9-1-2-3-2-8%200-5%204-10%204-14%200l-3-5c0-2%200-2%2014-2%2016%200%2016%200%2014-8-3-10-13-16-23-13m42%200c-8%203-12%208-9%2012%202%202%205%201%208-1%205-5%2014-5%2014%201%200%203-1%203-11%205-12%201-17%207-14%2015%203%207%2013%209%2022%205l4-2c0%203%208%205%2010%203%201-2%200-31-2-33-4-5-14-7-22-5m45%200c-9%203-13%209-13%2020-1%2013%206%2019%2019%2019%209-1%2013-3%2015-8%201-3%201-3-1-5-3-3-4-3-8%202-7%207-15%203-15-8s9-16%2015-9c3%204%206%204%208%201%205-7-9-15-20-12m-245%205c-10%205-9%2011%203%2015l5%202%203-5c2-5%202-5%200-10-3-6-4-6-11-2m53%202c-3%206%200%2015%203%2014%2016-4%2018-11%206-17-7-3-7-3-9%203m-26%200c-6%206%203%2015%209%2010%203-2%203-6%201-9-3-4-8-4-10-1m129%203l-3%204c0%201%2013%202%2019%201%201%200-3-6-5-7-4-2-8-1-11%202m51%2013c-9%201-11%205-7%208%204%204%2013-1%2013-7v-3l-6%202m-196%206c-2%207-2%209-1%2012l3%205c3%200%2010-3%2013-7l3-2-4-5c-5-5-14-7-14-3m33-1c-2%200-5%202-6%205l-4%204%204%203c11%209%2018%206%2015-7-1-6-2-7-9-5'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.7857142857142858,"src":"/static/ca31f74a20da556b69057d20ff6abaf2/2a4de/preview.png","srcSet":"/static/ca31f74a20da556b69057d20ff6abaf2/6d161/preview.png 150w,\n/static/ca31f74a20da556b69057d20ff6abaf2/630fb/preview.png 300w,\n/static/ca31f74a20da556b69057d20ff6abaf2/2a4de/preview.png 600w,\n/static/ca31f74a20da556b69057d20ff6abaf2/db955/preview.png 900w,\n/static/ca31f74a20da556b69057d20ff6abaf2/f3583/preview.png 1200w,\n/static/ca31f74a20da556b69057d20ff6abaf2/eeb1b/preview.png 1920w","sizes":"(max-width: 600px) 100vw, 600px"}}}}}},{"node":{"frontmatter":{"path":"blog/how-to-build-your-own-compiler","title":"How to build your own compiler ? ( The Worlds smallest compiler )","tags":["javascript"],"excerpt":"Compilers are there everywhere in our day to day use. Most developers tend to ignore it because they feel only the nerdiest of the geeks can code it. Let's build the worlds smallest compiler to understand how compilers work.","cover":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='258'%20viewBox='0%200%20400%20258'%20preserveAspectRatio='none'%3e%3cpath%20d='M290%2012l-10%2012H51v199h34l34%201-11%2013-14%2017-3%204h309v-52h-6l-7-1%207-1h6V0H300l-10%2012M181%2069c-10%202-18%206-26%2012l-6%204%2015%2015%2015%2015%204-2c2-2%206-3%208-3l3-1V67h-3l-10%202m18%2019l1%2021%203%201%207%203%204%202%2015-15%2015-14-3-3c-9-8-24-14-36-16h-6v21m-57%206c-7%209-13%2024-14%2035v5h41l1-3c0-2%201-6%203-8l2-4-15-15-14-15-4%205m90%2010l-15%2015%202%203c2%203%203%203-9%206-10%203-10%203-8%206l2%203%208-4c10-4%2011-4%2011-1%200%202%201%202%2022%202h21v-3c0-5-4-19-7-25-3-7-11-17-12-17l-15%2015m-106%2038l1%207v3h8l7%201%202%205%203%206-5%204-4%206c0%202%2019%2021%2020%2021s4-2%206-5l5-4%206%202%206%203v7l1%207h30v-15l6-2%206-2%205%204c2%203%205%205%206%205s20-19%2020-21l-4-6-5-5%202-5%202-6h8c9-1%209-2%209-8v-5l-22-1h-22l-1%206c-8%2025-45%2024-51-1l-1-5h-44v4'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.5463917525773196,"src":"/static/493231422a84266271f5b40a73e7bac7/2a4de/compiler.png","srcSet":"/static/493231422a84266271f5b40a73e7bac7/6d161/compiler.png 150w,\n/static/493231422a84266271f5b40a73e7bac7/630fb/compiler.png 300w,\n/static/493231422a84266271f5b40a73e7bac7/2a4de/compiler.png 600w,\n/static/493231422a84266271f5b40a73e7bac7/db955/compiler.png 900w,\n/static/493231422a84266271f5b40a73e7bac7/f3583/compiler.png 1200w,\n/static/493231422a84266271f5b40a73e7bac7/f534f/compiler.png 1240w","sizes":"(max-width: 600px) 100vw, 600px"}}}}}},{"node":{"frontmatter":{"path":"blog/django-the-widely-used-python-framework-for-web-development","title":"Django – The widely used python framework for web development","tags":["python","html","css"],"excerpt":"Django is a widely used python framework for web development. Learn what makes django so popular for backend development and why many startups and Tech giants prefer Django.","cover":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='225'%20viewBox='0%200%20400%20225'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%20113v112h401V0H0v113m0%200'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.7857142857142858,"src":"/static/600b89b5e2a7a8d8ef6e3d2a010bd48d/2a4de/django.png","srcSet":"/static/600b89b5e2a7a8d8ef6e3d2a010bd48d/6d161/django.png 150w,\n/static/600b89b5e2a7a8d8ef6e3d2a010bd48d/630fb/django.png 300w,\n/static/600b89b5e2a7a8d8ef6e3d2a010bd48d/2a4de/django.png 600w,\n/static/600b89b5e2a7a8d8ef6e3d2a010bd48d/db955/django.png 900w,\n/static/600b89b5e2a7a8d8ef6e3d2a010bd48d/f3583/django.png 1200w,\n/static/600b89b5e2a7a8d8ef6e3d2a010bd48d/5707d/django.png 1600w","sizes":"(max-width: 600px) 100vw, 600px"}}}}}},{"node":{"frontmatter":{"path":"blog/why-i-migrated-my-website-from-wordpress-to-gatsby","title":"Why I migrated my website from wordpress to gatsby? (gatsby vs wordpress)","tags":["javascript","gatsby","typescript"],"excerpt":"While building a CMS for blogging, worpdress is the most commonly used platform. Gatsby has also topped the list recently. This article talk which one to go for and why I shifted from wordpress to gatsby. Is gatsby better than wordpress is the question I would be answering.","cover":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='225'%20viewBox='0%200%20400%20225'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%20113v112h401V0H0v113m170-45c-4%203-5%208-5%2020l1%209-6%202c-11%205-19%2013-18%2019%202%206%209%2012%2019%2016l5%201v12c-1%2013%201%2017%207%2020h8c4-1%2017-9%2019-11l7%204c13%2010%2025%2010%2028-1v-20c-1-3-1-3%207-7%2021-10%2021-22%200-32l-8-3%201-5c4-26-9-35-29-19l-6%204-4-3c-10-9-20-11-26-6m4%203c-3%202-4%2010-4%2017%201%207%201%207%2010%206%206-1%207-2%2010-5l4-5c3-3%203-3-2-7-8-6-15-8-18-6m43%201c-5%202-12%208-12%209l5%207c4%205%204%205%2011%206l8%201%201-10c0-14-3-17-13-13M64%2074c-11%204-21%2013-26%2024-5%2010-5%2025%200%2036%2015%2029%2054%2032%2073%205%2016-23%205-56-23-64-6-2-18-2-24-1m248%201c-11%202-25%2012-30%2022-20%2043%2034%2082%2067%2049%2029-29%204-78-37-71m-6%206c-6%203-9%205-14%2010-4%204-4%205%204%204l6%201-2%202c-4%200-4-1%203%2019%208%2024%207%2023%2012%2010%203-11%203-12%202-16-2-9-5-13-8-13l-2-1c1-2%2023-2%2024-1l-1%202h-3c-2%201-1%205%205%2021l7%2019%206-25c0-2-1-6-4-10-3-8-3-10%201-14l2-2-3-2c-9-6-25-8-35-4M66%2084c-6%202-12%206-15%2010l-7%2013c0%201%2036%2039%2039%2040s13-4%2018-10c4-4%208-12%208-18l1-3H89l-1%202v3h7l8%201c0%205-12%2019-17%2019l-35-35c0-2%203-8%207-11%2011-9%2026-9%2036%200%205%204%205%204%207%202s2-2-2-5c-8-9-23-12-33-8m128%2014c-5%200-4%200-11%2011l-4%207%203%205%205%2010%203%204h21l3-5%205-9%202-5-3-6c-7-13-7-13-24-12m159%206l-13%2042c-3%207%209-5%2013-13%204-7%205-23%202-29l-2-4v4m-191%200c-18%208-18%2016-2%2024%207%203%208%203%2010-5l3-7-3-7-2-7-6%202m68%205l-2%208%202%206c2%207%203%207%205%206%208-1%2018-9%2018-13%200-2-7-9-12-11-9-4-8-4-11%204m54-4l-1%2011c0%2012%202%2018%2011%2027%208%208%2010%208%207-1a2802%202802%200%2001-16-40l-1%203m-88%201c-10%205-7%2021%205%2021%205%200%2010-6%2010-11%200-4-4-10-7-10h-8M43%20121c2%209%209%2019%2018%2024%203%202%2013%204%2013%203l-29-30c-2-1-2-1-2%203m277-1a644%20644%200%2001-10%2031c0%203%2017%204%2021%201%201%200%200-4-4-14l-7-18m-149%2018c-1%203-1%2018%201%2021%203%205%2012%203%2021-4l3-4-5-6c-5-5-5-6-10-6l-7-2-3%201m50%200c-6%202-8%202-10%205l-5%206-2%202%205%204c9%207%2017%209%2020%204%202-4%201-22-1-22l-7%201'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.7857142857142858,"src":"/static/245aecc3e8c42b31f1e4796cebebd2ce/4fe8c/gatsby-wordpress.jpg","srcSet":"/static/245aecc3e8c42b31f1e4796cebebd2ce/aabdf/gatsby-wordpress.jpg 150w,\n/static/245aecc3e8c42b31f1e4796cebebd2ce/9dc27/gatsby-wordpress.jpg 300w,\n/static/245aecc3e8c42b31f1e4796cebebd2ce/4fe8c/gatsby-wordpress.jpg 600w,\n/static/245aecc3e8c42b31f1e4796cebebd2ce/f9913/gatsby-wordpress.jpg 750w","sizes":"(max-width: 600px) 100vw, 600px"}}}}}},{"node":{"frontmatter":{"path":"blog/center-align-things-with-css","title":"Center aligning content with CSS and flex-box","tags":["html","css","reactjs"],"excerpt":"Many a time I noticed that people find it very difficult to align content to the center either vertically or horizontally using CSS. So let's see few ways in how you can align content with css.","cover":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='267'%20viewBox='0%200%20400%20267'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%20134v133h401V0H0v134m41-69v12h154V52H41v13m167-1v12h72V52h-72v12m81%202l1%2015h72V52h-73v14m-81%2023v7h72V81h-72v8M42%2084l-1%2026v25h73V84l-36-1-36%201m81%201v83h72V83h-36c-33%200-36%200-36%202m166%2011v10h73V86h-73v10m-81%2018v13h72v-26h-72v13m82%205v7h71v-15h-71v8m-82%2031v18h153v-36H208v18m-167%203l1%2015h71v-29H41v14m42%2032c-5%202-6%205-6%209%200%206%202%208%2012%2010%204%201%204%203%201%204-2%201-3%201-5-1-3-2-9-2-9%201l4%205c7%207%2019%202%2019-7%200-5-2-8-9-9-4%200-7-2-6-4s6-1%207%201c1%201%207%202%207%200%201-1-1-6-3-7-4-3-9-3-12-2m31%200a9%209%200%20002%2018c7%202%209%204%203%205l-4-1-4-1c-5-1-5%203-2%207%204%204%2015%204%2019%200%205-7%202-14-7-16-5%200-5-1-5-3s5-3%206-1c1%203%207%203%207%200%200-5-7-10-11-9l-4%201m197%201l-5%201-2%204c-4%205-4%2013-1%2018%206%2010%2021%209%2026-1%206-14-5-27-18-22m-265%202c-11%209-6%2027%209%2027%206%201%2010-2%2012-7%202-4%202-5-2-5-3%200-4%201-5%203-4%205-13%200-12-7s7-9%2011-4l6%202c4%200%204-1%202-5-3-7-15-10-21-4m109%2012l1%2015h3l4%201v-10h9v-8h-4c-5%200-5%200-5-3s0-3%205-3%205%200%205-3c1-4%201-4-9-4h-9v15m28%200v16h18v-8h-10v-22l-4-1h-4v15m27%200v16h18v-8h-5c-5%200-5%200-5-3%200-2%200-2%204-2l5%201v-8h-4c-4%200-5%200-5-2s1-2%203-2c7%200%207%200%207-3v-4h-18v15m26-15l4%208%204%206-2%204-5%208c-2%204-2%205%203%205%203-1%204-1%206-5%202-5%204-4%206%201l2%203c9%202%209%200%204-8l-5-8%204-6c5-8%205-8%200-8-3%200-4%200-6%204l-2%203-2-3c-2-4-3-4-7-4h-4m34%2015l1%2015h9c8%200%209-1%2011-3%202-3%203-8%201-11-1-1-2-2-1-4%202-4%201-6-2-9s-3-3-11-3h-8v15m67-14l4%207%204%206-5%207c-5%208-5%2010-2%209h4l4-4c3-5%203-5%206%200%202%204%203%204%207%204s4%200-1-8-5-7%200-15c4-7%204-7-1-7-3%200-4%200-5%204l-3%203-2-3c-2-4-2-4-6-4l-4%201m-26%209c-5%207%203%2017%209%2011%202-2%203-9%201-11-2-3-8-3-10%200'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.5,"src":"/static/1c65e8062d6b8d416bbfb2c1b729e891/4fe8c/flexbox-css.jpg","srcSet":"/static/1c65e8062d6b8d416bbfb2c1b729e891/aabdf/flexbox-css.jpg 150w,\n/static/1c65e8062d6b8d416bbfb2c1b729e891/9dc27/flexbox-css.jpg 300w,\n/static/1c65e8062d6b8d416bbfb2c1b729e891/4fe8c/flexbox-css.jpg 600w,\n/static/1c65e8062d6b8d416bbfb2c1b729e891/9842e/flexbox-css.jpg 900w,\n/static/1c65e8062d6b8d416bbfb2c1b729e891/8e2a4/flexbox-css.jpg 1140w","sizes":"(max-width: 600px) 100vw, 600px"}}}}}},{"node":{"frontmatter":{"path":"blog/react17-new-features","title":"What's new in React 17 ( No new features )","tags":["reactjs"],"excerpt":"In this article let's discuss the new upgrades made to React v17.0 that were released on October 20, 2020. React 17 has no new developer features added to it rather it has features added for backward compatibility.","cover":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='225'%20viewBox='0%200%20400%20225'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%20113v112h401V0H0v113m185-44c-3%201-4%208-3%2013v5l-5%202c-12%205-11%2014%201%2019l4%202v5c-2%2012%205%2016%2016%209l4-3%205%204c11%207%2016%203%2015-11v-4l5-3c11-5%2011-12%201-18l-6-2v-7c0-12-5-15-16-8l-4%203-4-2c-6-5-10-6-13-4m0%204v12h5c4%200%205-1%208-5l2-3-5-3c-5-3-8-4-10-1m26%200c-7%203-7%204-4%208%202%203%203%204%207%204%205%201%205%201%206-4%201-9-3-12-9-8m-18%2019c-4%205-4%206%200%2012l2%205h13l3-5c4-5%204-6%200-12l-3-5h-12l-3%205m-15%200c-9%204-9%209%201%2013l4%202%201-4c2-4%202-4%201-9-1-4-3-5-7-2m41%202c-2%204-2%205%200%209s2%204%205%203l6-4c4-3%203-7-3-10s-6-3-8%202m-21%200l-2%204%202%204%204%202%204-2%202-4-2-4-4-2-4%202m-13%2018v11c2%203%209%202%2013-3%202-1%202-2-1-5-4-4-11-6-12-3m29-1c-3%200-5%201-7%204l-3%204%202%202c5%204%2011%205%2013%202s1-13-1-13l-4%201m-50%2032c-2%202-3%204-3%208-1%205%200%208%202%205l2-1c2%202%208%203%2010%201h15c1%201%203%201%203-2l3-1%203%201c-1%204%202%204%204%201l1-3c-1-2%201-1%202%201%203%204%2011%205%2012%202%200-2%200-2-2-2-4%200-7-1-7-3s7-5%2011-5c5%200%205%200%203%204v6c1%203%204%203%204%200-1-1%200-4%201-6%202-4%202-5%205-5l4-2c0-2-6-2-13-1h-7c-1-2-9%202-11%205-2%204-4%203-4-1l-2-4c-2-1-7%203-9%208l-3%204h-5l-4-1%202-1%204-1c3-1%201-4-2-4-2%200-1-1%202-1%207-2%206-6-1-4-6%200-7%201-8%205l-1%206v3l-4-2-4-1%203-2c3-1%204-4%201-8-2-3-3-3-7%201m86-2v2l3%202h4c1%201-1%203-3%203s-4%203-2%204l1%203c0%203%202%203%204-1l3-3c3-1%204-4%202-4l-1-1c1-3-4-6-7-6l-4%201m58%203c-5%203-6%2010-2%2017%203%206%203%206%209%205%209-3%2013-8%2011-16-2-7-12-11-18-6m-227%200c-7%203-9%2013-4%2018%209%207%2022%200%2019-11-2-6-9-10-15-7m-28%2030c-2%203-1%205%202%205l3-1h1c1%202%202%202%204%201h6c3%200%205-2%205-4s0-2-1-1c-1%202-2%202-2%201-1-1-1-1-2%201-2%201-2%201-1-1l-1-2-2%203-2%202c-2%200-2%200-1-1l2-2c1-3-3-3-4%200-1%202-1%202-1%200%200-4-2-4-2-1l-1%203v-3c0-3-2-3-3%200m32%202c-1%203%200%204%204%203h5l1-3%201-1%201%202c0%203%200%203%202%200l1-3%201%202c0%203%203%204%205%202h1c1%201%208%202%2010%201v-1c-2%200-2%200-1-1l3-1c2%200%203%202%201%202l-1%201h2l2-3v-1l1-1-5-1c-5%200-6%201-6%203l-2%202v-5l-3%201h-1c0-1-1-1-2%201-2%202-2%202-2%200-1-2-7-3-8-1h-1c0-2-2-1-3%202l-3%202c-2%200-2%200%200-1l1-1v-1c1-2%201-2-1-2s-3%201-3%203'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.7857142857142858,"src":"/static/9daa87fd6b59f56f1454a4e46c5a351f/2a4de/react17.png","srcSet":"/static/9daa87fd6b59f56f1454a4e46c5a351f/6d161/react17.png 150w,\n/static/9daa87fd6b59f56f1454a4e46c5a351f/630fb/react17.png 300w,\n/static/9daa87fd6b59f56f1454a4e46c5a351f/2a4de/react17.png 600w,\n/static/9daa87fd6b59f56f1454a4e46c5a351f/db955/react17.png 900w,\n/static/9daa87fd6b59f56f1454a4e46c5a351f/f3583/react17.png 1200w,\n/static/9daa87fd6b59f56f1454a4e46c5a351f/5707d/react17.png 1600w","sizes":"(max-width: 600px) 100vw, 600px"}}}}}},{"node":{"frontmatter":{"path":"blog/promises-in-javascript","title":"Working with promises in Javascript","tags":["javascript","typescript","nodejs","reactjs"],"excerpt":"Let's talk about promises in javascript. What exactly is a promise in javascript and how to handle promises. This article will talk about the different methods to resolve promises.","cover":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='244'%20viewBox='0%200%20400%20244'%20preserveAspectRatio='none'%3e%3cpath%20d='M187%2010c-17%204-29%2017-33%2034l-1%205h-8c-9%200-10%201-12%2010-2%2011-2%2011-8%2011-16-1-27%2018-29%2050%200%2012%200%2012%202%2014l5%203%202%201-13%2043c-13%2040-15%2048-12%2051%202%202%20235%202%20237-1%203-2%202-8-6-33l-8-25%205-1c8%200%2010-1%2011-3%204-5%203-7-1-13-12-14-16-26-17-50-1-20-2-24-12-33l-5-5h-21c-18%200-20%200-20-2a46%2046%200%2000-56-56m-46%2051c-1%206-4%2015-6%2016l-9%201c-6%200-7%200-10%203-7%207-12%2022-12%2040v9h16l-2%207-9%2034-7%2026%202%207c2%208%202%209%208%207l5-1h-6c-3%200-4%200-3-1%203%200%203%200%202-3l-1-3a215%20215%200%200136%201l-4%203c-2%201-1%202%2022%202l24%201h-50a251%20251%200%200070%200c7%200%207%200%2012-2h19l34%203h20l1-7%202-7-4-16-4-16%2014-1%2013-1-3-4a89%2089%200%2001-18-57c0-12-2-19-9-24l-4-3h-32l-32%201%203%206%203%209%201%203-7-1c-9%200-15%202-16%206l-1%203-14-1-15-1c-1%200%202-11%204-14%203-4%206-5%2010-2l4%202%201-2c3-4%204-13%204-21v-6l-26-1h-26v5m85%2046c1%208%202%2012%204%2010l1%201c1%201%206%200%206-1h3l1-1v1h6l1-1h3l3-1%201-2c2%202%203-3%201-6-1-3-1-3-2-2h-2c-2-2-2-2%203-2%203%200%201-1-5-1l-12%201h-1l1-1-6-2-2%202-2%202c-2-1-1-4%201-4%201-1%201-1-1-1l-2-1v9m-85%2058l-3%2011h-8c-2-2-8%200-9%202-1%204%2015%206%2022%203%204-3%205-4%206-14%203-13%203-12-2-12h-5l-1%2010m20-8c-7%204-3%2010%208%2013l7%203c2%204-8%206-13%202-3-2-11%200-8%203%203%204%2018%206%2024%203%2010-5%208-11-4-15-8-2-9-4-8-6h13l3-2-3-1c-4-3-15-3-19%200m48%2031c-3%201-9%206-9%208l3-1c5-5%2010-5%2025-4l14%202-8-3c-10-3-20-3-25-2'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.6483516483516483,"src":"/static/c2e2602606aecbaead43ebcb31d5fc22/2a4de/javascript.png","srcSet":"/static/c2e2602606aecbaead43ebcb31d5fc22/6d161/javascript.png 150w,\n/static/c2e2602606aecbaead43ebcb31d5fc22/630fb/javascript.png 300w,\n/static/c2e2602606aecbaead43ebcb31d5fc22/2a4de/javascript.png 600w,\n/static/c2e2602606aecbaead43ebcb31d5fc22/5e6f2/javascript.png 789w","sizes":"(max-width: 600px) 100vw, 600px"}}}}}},{"node":{"frontmatter":{"path":"blog/code-splitting-in-react","title":"Code splitting in react with React.lazy() and Suspense","tags":["html","css","reactjs"],"excerpt":"Suppose the bundle size of your project is very huge and you don't want to load everything at once during the initial render you can use code splitting along with React to improve the performance and load time of your application.","cover":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='219'%20viewBox='0%200%20400%20219'%20preserveAspectRatio='none'%3e%3cpath%20d='M221%2013A234468%20234468%200%200086%2058c6%2015-8%2035-25%2035-9%200-21-7-24-16l-3-4-17%205-16%206-1%2067v68h401v-26l-1-110V0H260l-39%2013m61%2040v14h28V39h-28v14m1%200v13h26V40h-26v13M155%2083c-2%201-9%2011-9%2013s-2%201-2-2c-2-10-15-15-15-5%200%204%204%208%2010%2010%2015%206%2037-9%2024-15-3-2-5-2-8-1m-1%205l-4%207-3%204%203-1c6-1%2012-4%2013-6%202-6-5-8-9-4m-29%2023v8h18v-5l1-9v-3h-19v9m22%2020v8h19v-17h-19v9'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.829268292682927,"src":"/static/9fe51c6e6dab4ae76d9944746bfff13e/2a4de/codesplitting.png","srcSet":"/static/9fe51c6e6dab4ae76d9944746bfff13e/6d161/codesplitting.png 150w,\n/static/9fe51c6e6dab4ae76d9944746bfff13e/630fb/codesplitting.png 300w,\n/static/9fe51c6e6dab4ae76d9944746bfff13e/2a4de/codesplitting.png 600w,\n/static/9fe51c6e6dab4ae76d9944746bfff13e/db955/codesplitting.png 900w","sizes":"(max-width: 600px) 100vw, 600px"}}}}}}]}},"pageContext":{"postPath":"blog/hello-world-rolwins-first-blog","translations":[{"hreflang":"en","path":"/blog/hello-world-rolwins-first-blog"}]}},"staticQueryHashes":["4097791827"]}