[{"_id":"674553701b8c712f137b0775","publication":"5f65928935d6463d2b5f7ec2","user":{"_id":"5f65924435d6463d2b5f7ebc","isDeactivated":false,"numFollowers":1637,"hasGoldRing":true,"name":"Adithya Sreyaj","username":"adisreyaj","tagline":"Full stack dev ✨","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1623477660748/Qpb7jhHHO.png"},"createdAt":"2024-11-26T04:49:46.202Z","memberName":"Adithya Sreyaj","memberPhoto":"https://cdn.hashnode.com/res/hashnode/image/upload/v1623477660748/Qpb7jhHHO.png","privacyState":"public","role":"author","updatedAt":"2024-11-26T04:49:46.202Z","username":"adisreyaj","latestPosts":[{"_id":"6700182b02f515939d3a78e6","views":663,"isActive":true,"type":"story","partOfPublication":true,"responseCount":0,"replyCount":0,"reactions":[],"totalReactions":1,"isPinnedToBlog":true,"title":"Creating a reusable calendar component in Angular","subtitle":"Show customizable markers on the calendar easily.","cuid":"cm1uxyxyb000l09me096b5kam","dateAdded":"2024-10-04T16:30:35.363Z","isCoverAttributionHidden":false,"slug":"creating-a-reusable-calendar-component-in-angular","coverImage":"https://cdn.hashnode.com/res/hashnode/image/upload/v1727969907438/dc42afa2-3010-41f1-a13a-667748c2b4af.jpeg","brief":"Recently, I came across a tweet where someone posted a calendar component that was used for tracking different subscriptions. The tweet was trending because the design looks really good. I was working a project which could use a calendar component, s...","author":"5f65924435d6463d2b5f7ebc","readTime":4,"tags":["56744722958ef13879b94f59"],"publication":{"_id":"5f65928935d6463d2b5f7ec2","betaFeatures":{"newsletter":false,"embeds":false,"csvImport":false},"views":{"today":32,"thisWeek":613,"lastWeek":1272,"thisMonth":2537,"allTime":266035},"badgePageEnabled":true,"newsletterEnabled":true,"newsletterFrequency":"asap","staticPages":[],"isFeatured":false,"dailyViewsForCurrentMonth":{"1712016000":196,"1712102400":206,"1712188800":213,"1712275200":207,"1712361600":79,"1712448000":82,"1712534400":214,"1712620800":171,"1712707200":214,"1712793600":173,"1712880000":174,"1712966400":97,"1713052800":102,"1713139200":214,"1713225600":223,"1713312000":232,"1713398400":230,"1713484800":159,"1713571200":150,"1713657600":90,"1713744000":205,"1713830400":202,"1713916800":216,"1714003200":230,"1714089600":261,"1714176000":117,"1714262400":103,"1714348800":210,"1714435200":198,"1714521600":170},"author":"5f65924435d6463d2b5f7ebc","isActive":true,"username":"sreyaj","domain":"sreyaj.dev","urlPattern":"simple","title":"DCode - Learnings by Adithya Sreyaj","links":{"twitter":"https://twitter.com/Adisreyaj","github":"https://github.com/adisreyaj","website":"https://adi.so","hashnode":"https://hashnode.com/@adisreyaj","youtube":"","dailydev":"https://app.daily.dev/adisreyaj","linkedin":"https://www.linkedin.com/in/adithyasreyaj/"},"__v":0,"imprint":"","imprintMarkdown":"","meta":"A full stack developer who loves working with Angular and Nodejs. Love to create new projects (but never finishes them). Apart from Angular, I have tried React, React Native, and Next.js.","metaHTML":"

A full stack developer who loves working with Angular and Nodejs. Love to create new projects (but never finishes them). Apart from Angular, I have tried React, React Native, and Next.js.

\n","favicon":"https://cdn.hashnode.com/res/hashnode/image/upload/v1607785062915/k7cZcS6bh.png","headerColor":"","layout":"magazine","logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1618852864441/pnblpZoiS.png","description":"","displayTitle":"DCode - Learnings by Adithya Sreyaj","isAMPEnabled":true,"hasBadges":true,"darkModeEnabled":false,"darkModeLogo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1618852870376/ScHwq9VSe.png","customCSSDraft":{"home":".blog-header{\n border-bottom:none;\n padding-bottom: 1rem;\n box-shadow:\n 0 2px 7.1px rgba(0, 0, 0, 0.012),\n 0 6.7px 23.9px rgba(0, 0, 0, 0.018),\n 0 30px 107px rgba(0, 0, 0, 0.03);\n}\n.blog-sub-header{\n padding-top:0 !important;\n}\n\n.blog-sub-header-nav a {\n border-radius: 0.5rem;\n margin-right: 0.5rem;\n}\n\n.blog-nav-active{\n color: #4a53a0;\n background: #4a53a02b;\n}\n\n.blog-post-card-title{\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n}\n.blog-post-card-title:hover{\n color: #4a53a0;\n}\n.blog-body{\n background-color: #4a53a003;\n}\n:root:not(.dark) .blog-post-card-wrapper {\n background: #fff;\n}\n.blog-post-card-wrapper {\n padding: 20px;\n border-radius: 15px;\n border: 1px solid #dddddd85;\n box-shadow:\n 0 2.9px 35.2px rgba(0, 0, 0, 0.02),\n 0 23px 281px rgba(0, 0, 0, 0.04);\n}\n\n.blog-subscription-article-wrapper {\n background-color:none !important;\n}\n\n.blog-social-media-section a{\n border-radius: 12px;\n}\n.blog-social-media-section a:hover{\n color: #4a53a0;\n}\n.blog-header> .container > div {\n padding-top: 1rem;\n}\n.blog-post-card-brief{\n overflow: hidden;\ndisplay: -webkit-box;\n-webkit-box-orient: vertical;\n-webkit-line-clamp: 3;\n}\n\n.blog-post-card-meta{\n color: #4a53a0;\n}","post":".blog-header{\n border-bottom:none;\n padding-bottom: 1rem;\n margin-bottom:1rem;\n box-shadow:\n 0 2px 7.1px rgba(0, 0, 0, 0.012),\n 0 6.7px 23.9px rgba(0, 0, 0, 0.018),\n 0 30px 107px rgba(0, 0, 0, 0.03);\n}\n.blog-sub-header{\n padding-top:0 !important;\n}\n.blog-social-media-section a{\n border-radius: 12px;\n}\n.blog-social-media-section a:hover{\n color: #4a53a0;\n}\n.blog-header> .container > div {\n padding-top: 1rem;\n}\n.blog-header{\n border-bottom:none;\n}\n.blog-sub-header-nav a{\n border-radius: 0.5rem;\n margin-right: 0.5rem;\n}\n.blog-nav-active{\n color: #4a53a0;\n background: #4a53a02b;\n}\n\n.blog-content-main h1[itemprop=\"headline name\"] {\n background-image: linear-gradient( \n344deg\n ,#4a53a0 0,#3ab4be 100%);\n -webkit-background-clip: text;\n -moz-background-clip: text;\n -webkit-text-fill-color: transparent;\n -moz-text-fill-color: transparent;\n}\n.btn-bookmark-spp{\n color: #4a53a0;\n}\ndiv[itemprop=\"interactionStatistic\"]{\n background: #5c65a814;\n max-width: 800px;\n padding: 1rem;\n border-radius: 12px;\n margin: 0 auto;\n\n}","static":".blog-header{\n border-bottom:none;\n}\n.blog-sub-header-nav a{\n border-radius: 0.5rem;\n margin-right: 0.5rem;\n}\n.blog-nav-active{\n color: #4a53a0;\n background: #4a53a02b;\n}","homeMin":".blog-header{border-bottom:0;padding-bottom:1rem;box-shadow:0 2px 7.1px rgba(0,0,0,0.012),0 6.7px 23.9px rgba(0,0,0,0.018),0 30px 107px rgba(0,0,0,0.03)}.blog-sub-header{padding-top:0 !important}.blog-sub-header-nav a{border-radius:.5rem;margin-right:.5rem}.blog-nav-active{color:#4a53a0;background:#4a53a02b}.blog-post-card-title{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.blog-post-card-title:hover{color:#4a53a0}.blog-body{background-color:#4a53a003}:root:not(.dark) .blog-post-card-wrapper{background:#fff}.blog-post-card-wrapper{padding:20px;border-radius:15px;border:1px solid #dddddd85;box-shadow:0 2.9px 35.2px rgba(0,0,0,0.02),0 23px 281px rgba(0,0,0,0.04)}.blog-subscription-article-wrapper{background-color:none !important}.blog-social-media-section a{border-radius:12px}.blog-social-media-section a:hover{color:#4a53a0}.blog-header>.container>div{padding-top:1rem}.blog-post-card-brief{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.blog-post-card-meta{color:#4a53a0}","postMin":".blog-header{border-bottom:0;padding-bottom:1rem;margin-bottom:1rem;box-shadow:0 2px 7.1px rgba(0,0,0,0.012),0 6.7px 23.9px rgba(0,0,0,0.018),0 30px 107px rgba(0,0,0,0.03)}.blog-sub-header{padding-top:0 !important}.blog-social-media-section a{border-radius:12px}.blog-social-media-section a:hover{color:#4a53a0}.blog-header>.container>div{padding-top:1rem}.blog-header{border-bottom:0}.blog-sub-header-nav a{border-radius:.5rem;margin-right:.5rem}.blog-nav-active{color:#4a53a0;background:#4a53a02b}.blog-content-main h1[itemprop=\"headline name\"]{background-image:linear-gradient(344deg,#4a53a0 0,#3ab4be 100%);-webkit-background-clip:text;-moz-background-clip:text;-webkit-text-fill-color:transparent;-moz-text-fill-color:transparent}.btn-bookmark-spp{color:#4a53a0}div[itemprop=\"interactionStatistic\"]{background:#5c65a814;max-width:800px;padding:1rem;border-radius:12px;margin:0 auto}","staticMin":".blog-header{border-bottom:0}.blog-sub-header-nav a{border-radius:.5rem;margin-right:.5rem}.blog-nav-active{color:#4a53a0;background:#4a53a02b}"},"customCSSPublished":{"home":".blog-header{\n border-bottom:none;\n padding-bottom: 1rem;\n box-shadow:\n 0 2px 7.1px rgba(0, 0, 0, 0.012),\n 0 6.7px 23.9px rgba(0, 0, 0, 0.018),\n 0 30px 107px rgba(0, 0, 0, 0.03);\n}\n.blog-sub-header{\n padding-top:0 !important;\n}\n\n.blog-sub-header-nav a {\n border-radius: 0.5rem;\n margin-right: 0.5rem;\n}\n\n.blog-nav-active{\n color: #4a53a0;\n background: #4a53a02b;\n}\n\n.blog-post-card-title{\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n}\n.blog-post-card-title:hover{\n color: #4a53a0;\n}\n.blog-body{\n background-color: #4a53a003;\n}\n:root:not(.dark) .blog-post-card-wrapper {\n background: #fff;\n}\n.blog-post-card-wrapper {\n padding: 20px;\n border-radius: 15px;\n border: 1px solid #dddddd85;\n box-shadow:\n 0 2.9px 35.2px rgba(0, 0, 0, 0.02),\n 0 23px 281px rgba(0, 0, 0, 0.04);\n}\n\n.blog-subscription-article-wrapper {\n background-color:none !important;\n}\n\n.blog-social-media-section a{\n border-radius: 12px;\n}\n.blog-social-media-section a:hover{\n color: #4a53a0;\n}\n.blog-header> .container > div {\n padding-top: 1rem;\n}\n.blog-post-card-brief{\n overflow: hidden;\ndisplay: -webkit-box;\n-webkit-box-orient: vertical;\n-webkit-line-clamp: 3;\n}\n\n.blog-post-card-meta{\n color: #4a53a0;\n}","post":".blog-header{\n border-bottom:none;\n padding-bottom: 1rem;\n margin-bottom:1rem;\n box-shadow:\n 0 2px 7.1px rgba(0, 0, 0, 0.012),\n 0 6.7px 23.9px rgba(0, 0, 0, 0.018),\n 0 30px 107px rgba(0, 0, 0, 0.03);\n}\n.blog-sub-header{\n padding-top:0 !important;\n}\n.blog-social-media-section a{\n border-radius: 12px;\n}\n.blog-social-media-section a:hover{\n color: #4a53a0;\n}\n.blog-header> .container > div {\n padding-top: 1rem;\n}\n.blog-header{\n border-bottom:none;\n}\n.blog-sub-header-nav a{\n border-radius: 0.5rem;\n margin-right: 0.5rem;\n}\n.blog-nav-active{\n color: #4a53a0;\n background: #4a53a02b;\n}\n\n.blog-content-main h1[itemprop=\"headline name\"] {\n background-image: linear-gradient( \n344deg\n ,#4a53a0 0,#3ab4be 100%);\n -webkit-background-clip: text;\n -moz-background-clip: text;\n -webkit-text-fill-color: transparent;\n -moz-text-fill-color: transparent;\n}\n.btn-bookmark-spp{\n color: #4a53a0;\n}\ndiv[itemprop=\"interactionStatistic\"]{\n background: #5c65a814;\n max-width: 800px;\n padding: 1rem;\n border-radius: 12px;\n margin: 0 auto;\n\n}","static":".blog-header{\n border-bottom:none;\n}\n.blog-sub-header-nav a{\n border-radius: 0.5rem;\n margin-right: 0.5rem;\n}\n.blog-nav-active{\n color: #4a53a0;\n background: #4a53a02b;\n}","homeMin":".blog-header{border-bottom:0;padding-bottom:1rem;box-shadow:0 2px 7.1px rgba(0,0,0,0.012),0 6.7px 23.9px rgba(0,0,0,0.018),0 30px 107px rgba(0,0,0,0.03)}.blog-sub-header{padding-top:0 !important}.blog-sub-header-nav a{border-radius:.5rem;margin-right:.5rem}.blog-nav-active{color:#4a53a0;background:#4a53a02b}.blog-post-card-title{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.blog-post-card-title:hover{color:#4a53a0}.blog-body{background-color:#4a53a003}:root:not(.dark) .blog-post-card-wrapper{background:#fff}.blog-post-card-wrapper{padding:20px;border-radius:15px;border:1px solid #dddddd85;box-shadow:0 2.9px 35.2px rgba(0,0,0,0.02),0 23px 281px rgba(0,0,0,0.04)}.blog-subscription-article-wrapper{background-color:none !important}.blog-social-media-section a{border-radius:12px}.blog-social-media-section a:hover{color:#4a53a0}.blog-header>.container>div{padding-top:1rem}.blog-post-card-brief{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.blog-post-card-meta{color:#4a53a0}","postMin":".blog-header{border-bottom:0;padding-bottom:1rem;margin-bottom:1rem;box-shadow:0 2px 7.1px rgba(0,0,0,0.012),0 6.7px 23.9px rgba(0,0,0,0.018),0 30px 107px rgba(0,0,0,0.03)}.blog-sub-header{padding-top:0 !important}.blog-social-media-section a{border-radius:12px}.blog-social-media-section a:hover{color:#4a53a0}.blog-header>.container>div{padding-top:1rem}.blog-header{border-bottom:0}.blog-sub-header-nav a{border-radius:.5rem;margin-right:.5rem}.blog-nav-active{color:#4a53a0;background:#4a53a02b}.blog-content-main h1[itemprop=\"headline name\"]{background-image:linear-gradient(344deg,#4a53a0 0,#3ab4be 100%);-webkit-background-clip:text;-moz-background-clip:text;-webkit-text-fill-color:transparent;-moz-text-fill-color:transparent}.btn-bookmark-spp{color:#4a53a0}div[itemprop=\"interactionStatistic\"]{background:#5c65a814;max-width:800px;padding:1rem;border-radius:12px;margin:0 auto}","staticMin":".blog-header{border-bottom:0}.blog-sub-header-nav a{border-radius:.5rem;margin-right:.5rem}.blog-nav-active{color:#4a53a0;background:#4a53a02b}"},"customCSSEnabled":false,"fathomCustomDomain":"","fathomSiteID":"","fbPixelID":"","gaTrackingID":"","hotjarSiteID":"","matomoSiteID":null,"matomoURL":"","metaTags":"","wmPaymentPointer":"$ilp.uphold.com/Z7jDYwgMqBQN","customRules":[{"_id":"607bbecfc99e200d08f7bfa9","path":"/creating-custom-buttons-with-custom-loading-animations-in-angular-simple-and-easy","type":301,"destination":"https://blog.sreyaj.dev/creating-buttons-with-custom-loading-animations-in-angular-simple-and-easy"}],"fathomCustomDomainEnabled":false,"plausibleAnalyticsEnabled":true,"domainStatus":{"certIssued":true,"ready":true},"menu":[{"priority":2,"_id":"61f1542f87fd2728e7cd5b5d","type":"link","label":"Cardify","url":"https://cardify.adi.so/"},{"_id":"61324e2236015b2f4e1284e5","type":"link","label":"Flagsy","url":"https://flagsy.adi.so/"},{"_id":"61331f5f92d0321a999914e8","type":"link","label":"Buy 🍕","url":"https://www.buymeacoffee.com/adisreyaj"},{"priority":0,"_id":"6245cc6562d144fbc1c44fd5","type":"link","label":"Sponsor","url":"https://sreyaj.dev/sponsor"}],"viewCountVisible":true,"textSelectionSharerEnabled":true,"isEligibleFor2021EoyReview":true,"pageViews2021":37241,"domainUpdatedOn":"2022-01-31T19:20:36.097Z","umamiWebsiteUUID":"eff72a29-5283-43e3-b0d0-cec396e15471","umamiDataImported":true,"stripe":{"accountId":"acct_1Kic2TSDSg59VqXp","connected":true,"country":"IN"},"sponsorship":{"content":"

If you like what I'm doing, you can now sponsor me. It would really encourage me to put out more content. I put out content mainly around Angular and Node. All of the posts are based on things I've learned or used when creating my side projects. If I face a challenge or find a good way to do something, I usually document it for future reference. The only thing that I do is not keep it for myself, but open it up for everyone so that It can be of use to others as well.

\n","contentMarkdown":"If you like what I'm doing, you can now sponsor me. It would really encourage me to put out more content. I put out content mainly around **Angular** and **Node**. All of the posts are based on things I've learned or used when creating my side projects. If I face a challenge or find a good way to do something, I usually document it for future reference. The only thing that I do is not keep it for myself, but open it up for everyone so that It can be of use to others as well."},"updatedAt":"2024-09-26T16:29:37.798Z","allowCrawlingByGPT":true,"createdAt":"2020-09-19T05:09:29.000Z","isTeam":true,"numFollowers":1},"dateUpdated":"2024-10-06T13:29:36.154Z"},{"_id":"6627c239bd4a394bc83b94c5","views":1301,"isActive":true,"type":"story","partOfPublication":true,"responseCount":0,"replyCount":0,"reactions":[],"totalReactions":12,"isPinnedToBlog":false,"title":"Deploy Node.js applications on a VPS using Coolify with Dockerfile","cuid":"clvcgvyrk00040amt8nn8gg34","dateAdded":"2024-04-23T14:14:17.792Z","isCoverAttributionHidden":false,"coverImageAttribution":"","coverImagePhotographer":"","slug":"deploy-nodejs-applications-on-a-vps-using-coolify-with-dockerfile","coverImage":"https://cdn.hashnode.com/res/hashnode/image/upload/v1713602895834/024d6d38-4077-446c-aa3d-c99eb774eaff.png","brief":"In the previous article, I shared how to set up Coolify and deploy a Node.js application on a VPS using Nixpacks. It is the easiest way to deploy applications using Coolify. We don't need any knowledge of Docker.\nRead Here: Deploy Node.js application...","author":"5f65924435d6463d2b5f7ebc","readTime":3,"tags":["57d7b6ffd17cab545cab9d14","56744723958ef13879b9550d","56744722958ef13879b94ffb","56744721958ef13879b94b77"],"publication":{"_id":"5f65928935d6463d2b5f7ec2","betaFeatures":{"newsletter":false,"embeds":false,"csvImport":false},"views":{"today":32,"thisWeek":613,"lastWeek":1272,"thisMonth":2537,"allTime":266035},"badgePageEnabled":true,"newsletterEnabled":true,"newsletterFrequency":"asap","staticPages":[],"isFeatured":false,"dailyViewsForCurrentMonth":{"1712016000":196,"1712102400":206,"1712188800":213,"1712275200":207,"1712361600":79,"1712448000":82,"1712534400":214,"1712620800":171,"1712707200":214,"1712793600":173,"1712880000":174,"1712966400":97,"1713052800":102,"1713139200":214,"1713225600":223,"1713312000":232,"1713398400":230,"1713484800":159,"1713571200":150,"1713657600":90,"1713744000":205,"1713830400":202,"1713916800":216,"1714003200":230,"1714089600":261,"1714176000":117,"1714262400":103,"1714348800":210,"1714435200":198,"1714521600":170},"author":"5f65924435d6463d2b5f7ebc","isActive":true,"username":"sreyaj","domain":"sreyaj.dev","urlPattern":"simple","title":"DCode - Learnings by Adithya Sreyaj","links":{"twitter":"https://twitter.com/Adisreyaj","github":"https://github.com/adisreyaj","website":"https://adi.so","hashnode":"https://hashnode.com/@adisreyaj","youtube":"","dailydev":"https://app.daily.dev/adisreyaj","linkedin":"https://www.linkedin.com/in/adithyasreyaj/"},"__v":0,"imprint":"","imprintMarkdown":"","meta":"A full stack developer who loves working with Angular and Nodejs. Love to create new projects (but never finishes them). Apart from Angular, I have tried React, React Native, and Next.js.","metaHTML":"

A full stack developer who loves working with Angular and Nodejs. Love to create new projects (but never finishes them). Apart from Angular, I have tried React, React Native, and Next.js.

Members (1)

Adithya Sreyaj