{"tag":{"id":"56744721958ef13879b94b91","name":"CSS","logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1513316949083/By6UMkbfG.png","slug":"css","tagline":"A style sheet language used for describing the presentation of a document written in a markup language.","__typename":"Tag"},"publication":{"__typename":"Publication","id":"5cb472db602e12c87a71898d","url":"https://blog.greenroots.info","canonicalURL":"https://blog.greenroots.info","urlPattern":"SIMPLE","title":"GreenRoots Blog - Tapas Adhikary","displayTitle":"GreenRoots Blog - A Blog by Tapas Adhikary","hasBadges":true,"descriptionSEO":"Articles about Tech, JavaScript, Web Technologies, and Career development. ","about":{"html":"

Educator | YouTuber | Building ReactPlay | Let's Connect

\n","text":"Educator | YouTuber | Building ReactPlay | Let's Connect\n","__typename":"Content"},"features":{"newsletter":{"isEnabled":true,"__typename":"NewsletterFeature"},"viewCount":{"isEnabled":false,"__typename":"ViewCountFeature"},"readTime":{"isEnabled":true,"__typename":"ReadTimeFeature"},"textSelectionSharer":{"isEnabled":false,"__typename":"TextSelectionSharerFeature"},"customCSS":{"isEnabled":true,"published":{"__typename":"CustomCSS","homeMinified":".blog-impressum h3{display:none}","postMinified":".blog-impressum h3{display:none}.bymecofee img{width:200px}.hn-embed-widget-expanded#social{height:50px}#carbonads *{margin:initial;padding:initial}#carbonads{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',Helvetica,Arial,sans-serif}#carbonads{display:flex;max-width:330px;background-color:hsl(0,0%,98%);box-shadow:0 1px 4px 1px hsla(0,0%,0%,0.1);z-index:100}#carbonads a{color:inherit;text-decoration:none}#carbonads a:hover{color:inherit}#carbonads span{position:relative;display:block;overflow:hidden}#carbonads .carbon-wrap{display:flex}#carbonads .carbon-img{display:block;margin:0;line-height:1}#carbonads .carbon-img img{display:block}#carbonads .carbon-text{font-size:13px;padding:10px;margin-bottom:16px;line-height:1.5;text-align:left}#carbonads .carbon-poweredby{display:block;padding:6px 8px;background:#f1f1f2;text-align:center;text-transform:uppercase;letter-spacing:.5px;font-weight:600;font-size:8px;line-height:1;border-top-left-radius:3px;position:absolute;bottom:0;right:0}","staticMinified":".blog-impressum h3{display:none}"},"draft":{"__typename":"CustomCSS","homeMinified":".blog-impressum h3{display:none}","postMinified":".blog-impressum h3{display:none}.bymecofee img{width:200px}.hn-embed-widget-expanded#social{height:50px}#carbonads *{margin:initial;padding:initial}#carbonads{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',Helvetica,Arial,sans-serif}#carbonads{display:flex;max-width:330px;background-color:hsl(0,0%,98%);box-shadow:0 1px 4px 1px hsla(0,0%,0%,0.1);z-index:100}#carbonads a{color:inherit;text-decoration:none}#carbonads a:hover{color:inherit}#carbonads span{position:relative;display:block;overflow:hidden}#carbonads .carbon-wrap{display:flex}#carbonads .carbon-img{display:block;margin:0;line-height:1}#carbonads .carbon-img img{display:block}#carbonads .carbon-text{font-size:13px;padding:10px;margin-bottom:16px;line-height:1.5;text-align:left}#carbonads .carbon-poweredby{display:block;padding:6px 8px;background:#f1f1f2;text-align:center;text-transform:uppercase;letter-spacing:.5px;font-weight:600;font-size:8px;line-height:1;border-top-left-radius:3px;position:absolute;bottom:0;right:0}","staticMinified":".blog-impressum h3{display:none}"},"__typename":"CustomCSSFeature"},"gptBotCrawling":{"__typename":"GPTBotCrawlingFeature","isEnabled":false},"__typename":"PublicationFeatures"},"metaTags":"\n","ogMetaData":{"image":null,"__typename":"OpenGraphMetaData"},"author":{"__typename":"User","id":"5c9bb4026656f09759cdc1f0","name":"Tapas Adhikary","username":"atapas","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1645464332466/IynS2q6H6.jpeg"},"preferences":{"__typename":"Preferences","logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1571822266210/WoU_msKQk.png","darkMode":{"__typename":"DarkModePreferences","logo":null,"enabled":null},"navbarItems":[{"__typename":"PublicationNavbarItem","id":"647f24a11147de02efa76f55","label":"Collab","url":"https://blog.greenroots.info/collab","type":"page","series":null,"page":{"__typename":"StaticPage","id":"647f22611147de02efa76ebd"}},{"__typename":"PublicationNavbarItem","id":"647f24791147de02efa76f1c","label":"Open Source","url":"https://blog.greenroots.info/series/git-github-open-source","type":"series","series":{"__typename":"Series","id":"6336554bfa20fa4bc8e549a6"},"page":null},{"__typename":"PublicationNavbarItem","id":"647f247f1147de02efa76f2a","label":"Promises","url":"https://blog.greenroots.info/series/javascript-promises","type":"series","series":{"__typename":"Series","id":"610368709036db5b3513b66f"},"page":null},{"__typename":"PublicationNavbarItem","id":"647f24871147de02efa76f35","label":"React","url":"https://blog.greenroots.info/series/react","type":"series","series":{"__typename":"Series","id":"6451c56b02f36ce6e3008981"},"page":null},{"__typename":"PublicationNavbarItem","id":"647f248d1147de02efa76f41","label":"Blogging","url":"https://blog.greenroots.info/series/blogging-tips-and-tricks","type":"series","series":{"__typename":"Series","id":"5fb4be1cb589f1618af9e4d1"},"page":null},{"__typename":"PublicationNavbarItem","id":"6451ced902f36ce6e3008a58","label":"Support Me","url":"https://blog.greenroots.info/sponsor","type":"link","series":null,"page":null},{"__typename":"PublicationNavbarItem","id":"647f24951147de02efa76f4f","label":"Tips and Tricks","url":"https://blog.greenroots.info/series/learn-with-tips-tricks","type":"series","series":{"__typename":"Series","id":"6018de706f4ec96a5b77a31b"},"page":null},{"__typename":"PublicationNavbarItem","id":"6451cee102f36ce6e3008a62","label":"GitHub Sponsors","url":"https://blog.greenroots.info/github-sponsors","type":"page","series":null,"page":{"__typename":"StaticPage","id":"628e48f419bda58ac7fb13c5"}},{"__typename":"PublicationNavbarItem","id":"6451cee802f36ce6e3008a6d","label":"Hacking","url":"https://blog.greenroots.info/series/hacking","type":"series","series":{"__typename":"Series","id":"603717f70c99f77f2f8a67a0"},"page":null},{"__typename":"PublicationNavbarItem","id":"604632b1d0457f4d5c58333a","label":"About","url":"https://blog.greenroots.info/about","type":"page","series":null,"page":{"__typename":"StaticPage","id":"5f12dc1fb8ea603b4afa19e3"}}],"enabledPages":{"__typename":"PagesPreferences","badges":true,"newsletter":true,"members":null},"layout":"magazine","disableFooterBranding":false,"isSubscriptionModalDisabled":false},"favicon":"https://cdn.hashnode.com/res/hashnode/image/upload/v1560855683137/85XtBDDa2.png","headerColor":"#fbfff5","integrations":{"fbPixelID":"","fathomSiteID":"","fathomCustomDomainEnabled":null,"fathomCustomDomain":"","hotjarSiteID":"2056755","matomoSiteID":null,"matomoURL":"","gaTrackingID":"G-Q12G7XEZEH","gTagManagerID":null,"plausibleAnalyticsEnabled":null,"wmPaymentPointer":"$ilp.uphold.com/mExiJU8rNMp2","__typename":"PublicationIntegrations"},"imprintV2":{"__typename":"Content","html":"

Learn from Video Tutorials ✨

▶️ My YouTube Channel

Blogs I enjoy reading 👇

Victoria Lo's Blog | Chris's Daily Dev Tips | Marko Denic's Post

\n"},"postsCount":{"totalDocuments":180,"__typename":"PublicationPostConnection"},"isTeam":false,"links":{"twitter":"https://twitter.com/tapasadhikary","instagram":"https://instagram.com/tapascript","github":"https://github.com/atapas","website":"https://tapasadhikary.com","hashnode":"https://hashnode.com/@atapas","youtube":"https://www.youtube.com/channel/UCaYr5yxgOyk599Mnb3TGh-g","dailydev":"https://app.daily.dev/atapas","linkedin":"https://www.linkedin.com/in/tapasadhikary","mastodon":"https://fosstodon.org/@tapasadhikary","facebook":null,"__typename":"PublicationLinks"},"domainInfo":{"__typename":"DomainInfo","hashnodeSubdomain":"atapas","domain":{"__typename":"DomainStatus","host":"blog.greenroots.info","ready":true},"wwwPrefixedDomain":null},"redirectionRules":[],"totalRecommendedPublications":4,"sponsorship":{"content":{"html":"

Hey, there 👋,

Thanks for dropping by. I hope you spend a couple of minutes reading this page.

✋ A few lines about My Work and Me

I am Tapas, a technology blogger from India. I am passionate about knowledge sharing, open-source contributions, connecting to people, and mentoring.

After spending a decade in software development and web programming, I finally got the wisdom 💡 to start my blog a few years ago. Believe me or not, that is my wisest decision so far. Sharing is indeed the best way to gain knowledge 👨🏻‍🎓.

I write articles on JavaScript, Web Technologies, ReactJS, Tips & Tricks, Software Development, Blogging, and Leadership. You may find my blog very useful if you are interested in any of these. So please give it a try.

🤝 Why do I need your Support?

First of all, Thank You very much 🙏 for reading, liking, and commenting on my articles. The biggest motivation behind consistent content creation is YOU, my readers.

As you know, writing quality articles takes time and effort. Therefore, if you have enjoyed my articles or it was helpful to you, please consider showing your thanks by sponsoring me. It will surely motivate me further to write excellent content in the future 😊.

You Can click on the Sponsor Author button at the top of the page.
I love community building and Open Source. Please sponsor my work on GitHub.
You can buy me coffee.

Additionally, you can extend your support by following me on Twitter(@tapasadhikary), LinkedIn(tapasadhikary), and GitHub(atapas).

🙏 Thank You

Thanks for sponsoring & supporting!

$\"thanku.gif\"$

\n","markdown":"Hey, there 👋,\n\nThanks for dropping by. I hope you spend a couple of minutes reading this page.\n\n# ✋ A few lines about My Work and Me\n\nI am Tapas, a technology blogger from India. I am passionate about knowledge sharing, open-source contributions, connecting to people, and mentoring. \n\nAfter spending a decade in software development and web programming, I finally got the wisdom 💡 to start my blog a few years ago. Believe me or not, that is my wisest decision so far. Sharing is indeed the best way to gain knowledge 👨🏻‍🎓.\n\nI write articles on `JavaScript`, `Web Technologies`, `ReactJS`, `Tips & Tricks`, `Software Development`, `Blogging`, and `Leadership`. You may find my [blog](https://blog.greenroots.info/) very useful if you are interested in any of these. So please give it a try.\n\n# 🤝 Why do I need your Support?\nFirst of all, Thank You very much 🙏 for reading, liking, and commenting on my articles. The biggest motivation behind consistent content creation is YOU, my readers. \n\nAs you know, writing quality articles takes time and effort. Therefore, if you have enjoyed my articles or it was helpful to you, please consider showing your thanks by sponsoring me. It will surely motivate me further to write excellent content in the future 😊.\n\n- You Can click on the `Sponsor Author` button at the top of the page.\n- I love community building and Open Source. Please [sponsor my work on GitHub](https://github.com/sponsors/atapas).\n- You can [buy me coffee](https://www.buymeacoffee.com/greenroots).\n\nAdditionally, you can extend your support by following me on [Twitter(@tapasadhikary)](https://twitter.com/tapasadhikary), [LinkedIn(tapasadhikary)](https://www.linkedin.com/in/tapasadhikary/), and [GitHub(atapas)](https://github.com/atapas).\n\n# 🙏 Thank You\nThanks for sponsoring & supporting! \n\n![thanku.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1629046879035/ksoerXa44.gif)","__typename":"Content"},"stripe":{"connected":true,"accountId":"acct_1ImxGzSISOxCjXai","country":"IN","__typename":"StripeConfiguration"},"__typename":"PublicationSponsorship"},"pro":null,"allowContributorEdits":true,"posts":{"edges":[{"node":{"__typename":"Post","id":"628f315543220290a7eec27d","title":"The story of the custom scrollbar using CSS","slug":"the-story-of-the-custom-scrollbar-using-css","publishedAt":"2022-05-26T07:50:45.087Z","cuid":"cl3mpu4ra03s63znv7wsu8xky","url":"https://blog.greenroots.info/the-story-of-the-custom-scrollbar-using-css","subtitle":"You can customize the scrollbar with a bit of CSS easily. Learn how to do it with a step-by-step explanation.","brief":"A scrollbar is helpful and evident when a web page's content overflows beyond the visible areas. The look and feel of a scrollbar depend on the browser's implementation. A scrollbar's look differs from Google Chrome to Firefox to Safari. In most case...","readTimeInMinutes":5,"views":6969,"author":{"__typename":"User","id":"5c9bb4026656f09759cdc1f0","username":"atapas","name":"Tapas Adhikary","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1645464332466/IynS2q6H6.jpeg","followersCount":33092},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1653551598969/a1cJ94yKs.png","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjI4ZjMxNTU0MzIyMDI5MGE3ZWVjMjdkXzIwMjItMDUtMjZUMDc6NTA6NDUuMDg3Wg==","__typename":"PostEdge"},{"node":{"__typename":"Post","id":"60c07bb47c121d4151b3a00d","title":"10 DevTools tricks to help you with CSS and UX design","slug":"10-devtools-tricks-to-help-you-with-css-and-ux-design","publishedAt":"2021-06-09T08:28:36.816Z","cuid":"ckpp7mtnu04u6whs143e7huwx","url":"https://blog.greenroots.info/10-devtools-tricks-to-help-you-with-css-and-ux-design","subtitle":"Learn how to use the browser's DevTools for CSS and UX Design. Here are 10 tricks I found extremely useful for web development. Please read on.","brief":"Introduction\nWeb development is much more fun now than ever. We have increasing opportunities with frameworks, libraries, communities, skills, and tools compared to what we had a decade ago. Today, there are hardly any web developers who want to lim...","readTimeInMinutes":10,"views":14218,"author":{"__typename":"User","id":"5c9bb4026656f09759cdc1f0","username":"atapas","name":"Tapas Adhikary","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1645464332466/IynS2q6H6.jpeg","followersCount":33092},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1622633509205/ETBTKty9g.png","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjBjMDdiYjQ3YzEyMWQ0MTUxYjNhMDBkXzIwMjEtMDYtMDlUMDg6Mjg6MzYuODE2Wg==","__typename":"PostEdge"},{"node":{"__typename":"Post","id":"6094be11d1bbc47b91a67934","title":"10 online code editors for web developers","slug":"10-online-code-editors-for-web-developers","publishedAt":"2021-05-07T04:12:01.363Z","cuid":"ckodsxqg60drieps123zqdead","url":"https://blog.greenroots.info/10-online-code-editors-for-web-developers","subtitle":"As developers, we love experimenting, proofs-of-concept. The online code editors help us to get started fast. Learn about 10 such editors for webdevs.","brief":"Originally Published on Bugfender\n\nA code editor gives developers an environment to write code using a specific programming language. While the code editor's primary purpose is to assist with coding, most of the editors go beyond and help developers ...","readTimeInMinutes":6,"views":1093,"author":{"__typename":"User","id":"5c9bb4026656f09759cdc1f0","username":"atapas","name":"Tapas Adhikary","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1645464332466/IynS2q6H6.jpeg","followersCount":33092},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1620293899652/bC_n8xKTn.png","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjA5NGJlMTFkMWJiYzQ3YjkxYTY3OTM0XzIwMjEtMDUtMDdUMDQ6MTI6MDEuMzYzWg==","__typename":"PostEdge"},{"node":{"__typename":"Post","id":"609139e9763ca930333666a0","title":"Understanding the Picture-in-Picture web API with examples","slug":"understanding-the-picture-in-picture-web-api-with-examples","publishedAt":"2021-05-04T12:11:21.541Z","cuid":"cko9zqlz90072irs16yph2gxd","url":"https://blog.greenroots.info/understanding-the-picture-in-picture-web-api-with-examples","subtitle":"JavaScript Web APIs provide many helpful features. The picture-in-Picture feature is one you should know to use and control videos in better ways.","brief":"Picture-in-Picture is a feature supported by some smart televisions, devices to show the content(like videos) on a floating window(on the top of other windows) so that users can continue to see the content while interacting with the background page, ...","readTimeInMinutes":5,"views":4604,"author":{"__typename":"User","id":"5c9bb4026656f09759cdc1f0","username":"atapas","name":"Tapas Adhikary","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1645464332466/IynS2q6H6.jpeg","followersCount":33092},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1620129983491/UoJpINldD.gif","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjA5MTM5ZTk3NjNjYTkzMDMzMzY2NmEwXzIwMjEtMDUtMDRUMTI6MTE6MjEuNTQxWg==","__typename":"PostEdge"},{"node":{"__typename":"Post","id":"6064086df7e8f90bd1d5ea59","title":"10 trivial yet powerful HTML facts you must know","slug":"10-trivial-yet-powerful-html-facts-you-must-know","publishedAt":"2021-03-31T05:28:13.529Z","cuid":"ckmx0d7q30346c1s125iydcsa","url":"https://blog.greenroots.info/10-trivial-yet-powerful-html-facts-you-must-know","subtitle":"HTML is the most fundamental pillar of web development. We often ignore some trivial facts that could be very powerful when we know to use them.","brief":"One of the learnings I have after using HTML for over a decade is that many of the facts related to it are so underrated. As a developer, we usually do not pay much attention to them or build a hazy perspective. This article will learn about 10 such ...","readTimeInMinutes":9,"views":9000,"author":{"__typename":"User","id":"5c9bb4026656f09759cdc1f0","username":"atapas","name":"Tapas Adhikary","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1645464332466/IynS2q6H6.jpeg","followersCount":33092},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1616748020460/bRKjYkvTuq.png","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjA2NDA4NmRmN2U4ZjkwYmQxZDVlYTU5XzIwMjEtMDMtMzFUMDU6Mjg6MTMuNTI5Wg==","__typename":"PostEdge"},{"node":{"__typename":"Post","id":"6018e06c71a0a26a8eebc109","title":"10 VS Code emmet tips to make you more productive","slug":"10-vs-code-emmet-tips-to-make-you-more-productive","publishedAt":"2021-02-02T05:17:32.760Z","cuid":"ckknjvxal028f1qs18w20e94t","url":"https://blog.greenroots.info/10-vs-code-emmet-tips-to-make-you-more-productive","subtitle":"","brief":"In general, productivity is the ratio between output and input. In software engineering, programming productivity(or development productivity) can be the ratio between the quantity of the software code produced and its time cost. \nIn mathematical ter...","readTimeInMinutes":6,"views":39926,"author":{"__typename":"User","id":"5c9bb4026656f09759cdc1f0","username":"atapas","name":"Tapas Adhikary","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1645464332466/IynS2q6H6.jpeg","followersCount":33092},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1612168452289/wiBLFUGGD.png","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjAxOGUwNmM3MWEwYTI2YThlZWJjMTA5XzIwMjEtMDItMDJUMDU6MTc6MzIuNzYwWg==","__typename":"PostEdge"}],"pageInfo":{"endCursor":"NjAxOGUwNmM3MWEwYTI2YThlZWJjMTA5XzIwMjEtMDItMDJUMDU6MTc6MzIuNzYwWg==","hasNextPage":true,"__typename":"PageInfo"},"__typename":"PublicationPostConnection"}}}