<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Hardique Dasore</title>
    <description>The latest articles on DEV Community by Hardique Dasore (@hardiquedasore).</description>
    <link>https://dev.to/hardiquedasore</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F694209%2F727e52cd-657d-4928-b99d-a9adb7b5a51a.jpeg</url>
      <title>DEV Community: Hardique Dasore</title>
      <link>https://dev.to/hardiquedasore</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/hardiquedasore"/>
    <language>en</language>
    <item>
      <title>Welcome to the Future of Customer Experience</title>
      <dc:creator>Hardique Dasore</dc:creator>
      <pubDate>Sat, 18 Jul 2026 18:37:25 +0000</pubDate>
      <link>https://dev.to/hardiquedasore/welcome-to-the-future-of-customer-experience-1am1</link>
      <guid>https://dev.to/hardiquedasore/welcome-to-the-future-of-customer-experience-1am1</guid>
      <description>&lt;p&gt;This month marked a major milestone for &lt;a href="//nexusbeings.ai"&gt;Nexus Beings&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;We successfully deployed our &lt;strong&gt;first customer pilot&lt;/strong&gt;, and &lt;strong&gt;Nexus Beings is now live&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;For many, this may seem like just another product launch. For us, it represents the beginning of a new era in how businesses engage with their customers.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fh3y9pwzuulqgb91rpc1b.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fh3y9pwzuulqgb91rpc1b.jpg" alt="Nexus Beings Smart Kiosk" width="800" height="1067"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Why We Started Nexus Beings
&lt;/h2&gt;

&lt;p&gt;Every business wants to deliver exceptional customer experiences, but reality often gets in the way.&lt;/p&gt;

&lt;p&gt;Long queues, limited operating hours, staff shortages, rising labour costs, and inconsistent service make it increasingly difficult for businesses to meet growing customer expectations.&lt;/p&gt;

&lt;p&gt;At the same time, artificial intelligence has reached a point where it can understand context, communicate naturally, and perform meaningful tasks. Yet, most businesses are still using AI as little more than a chatbot on their website.&lt;/p&gt;

&lt;p&gt;We believed AI could do much more.&lt;/p&gt;

&lt;h2&gt;
  
  
  Beyond Chatbots
&lt;/h2&gt;

&lt;p&gt;At Nexus Beings, we're building AI-powered digital workers that interact naturally with customers, understand business knowledge, integrate with enterprise systems, and help businesses deliver premium customer experiences.&lt;/p&gt;

&lt;p&gt;These aren't rule-based bots.&lt;/p&gt;

&lt;p&gt;They are conversational AI agents capable of answering questions, recommending products, booking appointments, assisting customers in multiple languages, and supporting employees in real time.&lt;/p&gt;

&lt;p&gt;Our vision has always been simple:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Every business should have an intelligent digital worker that represents its brand and works alongside its human team.&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Built for the Agent Era
&lt;/h2&gt;

&lt;p&gt;Software is undergoing a fundamental shift.&lt;/p&gt;

&lt;p&gt;Instead of people navigating applications, intelligent AI agents will increasingly navigate software on behalf of people.&lt;/p&gt;

&lt;p&gt;Businesses won't simply buy software. They'll deploy autonomous digital workers capable of understanding customer intent, accessing business systems, and completing tasks from start to finish.&lt;/p&gt;

&lt;p&gt;Nexus Beings is built for this new reality.&lt;/p&gt;

&lt;p&gt;Our platform combines conversational AI, digital humans, enterprise integrations, and workflow automation into a unified customer experience platform that bridges the digital and physical worlds.&lt;/p&gt;

&lt;h2&gt;
  
  
  Making Enterprise AI Accessible
&lt;/h2&gt;

&lt;p&gt;We believe businesses shouldn't need a team of AI engineers to deploy intelligent digital workers.&lt;/p&gt;

&lt;p&gt;That's why we built our &lt;strong&gt;no-code Agent Builder&lt;/strong&gt;, enabling organizations to create, customize, and deploy AI agents without writing code.&lt;/p&gt;

&lt;p&gt;Whether it's a hotel concierge, retail assistant, travel consultant, healthcare receptionist, or customer support specialist, businesses can build AI agents tailored to their own operations.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Watch our Agent Builder demo:&lt;/strong&gt;&lt;br&gt;
&lt;a href="https://youtu.be/CzcitGuEPG8" rel="noopener noreferrer"&gt;https://youtu.be/CzcitGuEPG8&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Bringing AI Into the Physical World
&lt;/h2&gt;

&lt;p&gt;Customer experience doesn't end online.&lt;/p&gt;

&lt;p&gt;Millions of customer interactions happen every day inside hotels, retail stores, clinics, airports, and reception areas.&lt;/p&gt;

&lt;p&gt;Our AI-powered kiosks bring conversational digital workers into these physical environments, allowing customers to speak naturally with an AI representative that can answer questions, provide recommendations, and complete real business tasks.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Watch our AI Kiosk demo:&lt;/strong&gt;&lt;br&gt;
&lt;a href="https://youtube.com/shorts/JNH-STRoprs" rel="noopener noreferrer"&gt;https://youtube.com/shorts/JNH-STRoprs&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  A Milestone, Not the Destination
&lt;/h2&gt;

&lt;p&gt;Deploying our first pilot this month is an important validation that businesses are ready for a new generation of customer experience.&lt;/p&gt;

&lt;p&gt;We're grateful to our pilot customer, our team, advisors, research collaborators, and everyone who has supported us throughout this journey.&lt;/p&gt;

&lt;p&gt;This is only the beginning.&lt;/p&gt;

&lt;p&gt;Our mission is to build the AI workforce that transforms how businesses interact with customers, empowering organizations with intelligent digital workers that are always available, always learning, and always improving.&lt;/p&gt;

&lt;p&gt;Welcome to the future of customer experience.&lt;/p&gt;

&lt;p&gt;Welcome to Nexus Beings.&lt;/p&gt;

</description>
      <category>startup</category>
      <category>ai</category>
      <category>agents</category>
      <category>showdev</category>
    </item>
    <item>
      <title>Here's a Sneak Peek of What We've Built at Nexus Beings</title>
      <dc:creator>Hardique Dasore</dc:creator>
      <pubDate>Wed, 11 Feb 2026 03:14:52 +0000</pubDate>
      <link>https://dev.to/hardiquedasore/heres-a-sneak-peek-of-what-weve-built-at-nexus-beings-48n3</link>
      <guid>https://dev.to/hardiquedasore/heres-a-sneak-peek-of-what-weve-built-at-nexus-beings-48n3</guid>
      <description>&lt;p&gt;After months of building, iterating, and stress-testing ideas late into the night, I'm excited to finally share a sneak peek of what we've been working on at Nexus Beings: a new way for brick-and-mortar businesses and SMEs to create and deploy digital agents effortlessly.&lt;/p&gt;

&lt;p&gt;This demo showcases how simple it is to design, configure, and launch a fully functional Al-powered multilingual digital agent without writing a single line of code.&lt;/p&gt;

&lt;p&gt;From idea to live agent in minutes.&lt;/p&gt;

&lt;p&gt;Why this matters for brick-and-mortar stores and SMES?&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;No complex setup&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;No technical barriers&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;No need for large teams or long deployment cycles&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Just powerful digital agents that can capture leads, collect information, answer questions, and engage customers consistently and at scale.&lt;/p&gt;

&lt;p&gt;This is only the beginning. We're building Nexus Beings to help businesses extend their presence beyond physical locations and operating hours, while keeping experiences personal, conversational, and human.&lt;/p&gt;

&lt;p&gt;More updates coming soon and we can't wait to share what's next.&lt;/p&gt;

&lt;p&gt;If you're curious about where Al agents are headed for real-world businesses, join the waitlist → nexusbeings.ai&lt;/p&gt;

&lt;p&gt;&lt;a href="https://youtu.be/E-_r67Gg3-g?feature=shared" rel="noopener noreferrer"&gt;Demo&lt;/a&gt;&lt;/p&gt;

</description>
      <category>ai</category>
      <category>agents</category>
      <category>startup</category>
    </item>
    <item>
      <title>Developing real-time, humanlike AI video agents that enable natural customer interactions</title>
      <dc:creator>Hardique Dasore</dc:creator>
      <pubDate>Sun, 30 Nov 2025 01:58:51 +0000</pubDate>
      <link>https://dev.to/hardiquedasore/developing-real-time-humanlike-ai-video-agents-that-enable-natural-customer-interactions-4hj5</link>
      <guid>https://dev.to/hardiquedasore/developing-real-time-humanlike-ai-video-agents-that-enable-natural-customer-interactions-4hj5</guid>
      <description>&lt;p&gt;“You should live your life like a lion which means that most of your time you’re resting, lazing around, doing whatever you find entertaining, and then once in a while, you get obsessed with something and you just pour everything into it.” - Naval Ravikant&lt;/p&gt;

&lt;p&gt;Last year, I completed my Masters in Australia. Two paths lay ahead: accept a comfortable job with visa security, or build something that could create real impact.&lt;/p&gt;

&lt;p&gt;This philosophy captured my journey with Nexus Beings. For a long time, the concept lived quietly in notes and sketches while I navigated life as an international student. Then came the obsession: building digital agents that don't just respond, but understand; systems that bring context, emotion, and intent to the world of service.&lt;/p&gt;

&lt;p&gt;I chose to build.&lt;/p&gt;

&lt;p&gt;Today, Nexus Beings has achieved proof of concept.&lt;/p&gt;

&lt;p&gt;Bootstrapping as an immigrant meant every decision carried extra weight. Without external funding or a safety net, every line of code, every experiment, and every pivot had to matter. These constraints became my greatest teacher, fostering innovation through limitation and patience through uncertainty.&lt;/p&gt;

&lt;p&gt;This milestone represents more than technical validation. It proves that conviction outlasts complexity and that clarity of purpose sustains when traditional resources cannot.&lt;/p&gt;

&lt;p&gt;While Nexus Beings continues to evolve, our foundation stands strong: intelligent real-time conversational video agents that deliver warmth, reliability, and empathy to service environments. What began as an experiment is steadily advancing toward redefining digital presence in customer experience.&lt;/p&gt;

&lt;p&gt;The comfortable job would have been easier. But building technology that transforms how businesses connect with customers? That obsession was worth every risk.&lt;/p&gt;

&lt;p&gt;The journey continues, grounded in purpose and guided by the belief in what's next.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>startup</category>
      <category>computervision</category>
      <category>career</category>
    </item>
    <item>
      <title>How to increase the transparency of the background image without affecting the content?</title>
      <dc:creator>Hardique Dasore</dc:creator>
      <pubDate>Wed, 27 Dec 2023 17:07:13 +0000</pubDate>
      <link>https://dev.to/hardiquedasore/how-to-increase-the-transparency-of-the-background-image-without-affecting-the-content-5a1e</link>
      <guid>https://dev.to/hardiquedasore/how-to-increase-the-transparency-of-the-background-image-without-affecting-the-content-5a1e</guid>
      <description>&lt;p&gt;While creating landing pages, we often encounter the issue that the background image of the banner is too dark and any content added to the banner is not visible clearly. &lt;/p&gt;

&lt;p&gt;Consider the following code:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;!DOCTYPE html&amp;gt;
&amp;lt;html&amp;gt;
&amp;lt;head&amp;gt;
&amp;lt;style&amp;gt;
p {
  background-image: url('img_girl.jpg');
  padding: 100px 20px;
  background-repeat: no-repeat;
}
&amp;lt;/style&amp;gt;
&amp;lt;/head&amp;gt;
&amp;lt;body&amp;gt;

&amp;lt;h2&amp;gt;Background Image&amp;lt;/h2&amp;gt;

&amp;lt;p&amp;gt;You can specify background images&amp;lt;br&amp;gt;
for any visible HTML element.&amp;lt;br&amp;gt;
In this example, the background image&amp;lt;br&amp;gt;
is specified for a div element.&amp;lt;br&amp;gt;
By default, the background image &amp;lt;br&amp;gt;
will repeat itself in the direction(s)&amp;lt;br&amp;gt;
where it is smaller than the element&amp;lt;br&amp;gt;
where it is specified. (Try resizing the&amp;lt;br&amp;gt;
browser window to see how the&amp;lt;br&amp;gt;
background image behaves.&amp;lt;/p&amp;gt;

&amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqilp08p0e7aflbl77guf.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqilp08p0e7aflbl77guf.png" alt=" " width="800" height="484"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We cannot see the text clearly as the image's contrast is high. We try to reduce the opacity of the background image by adding &lt;code&gt;opacity: 0.5&lt;/code&gt; to the style.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fe2wnbyv4ueir8csebh3f.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fe2wnbyv4ueir8csebh3f.png" alt=" " width="800" height="478"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;But this reduces the opacity of the text/content as well. &lt;/p&gt;

&lt;p&gt;We can solve the issue using 2 different approaches:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Approach 1:&lt;/strong&gt; Using Wrapper Container&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;!DOCTYPE html&amp;gt;
&amp;lt;html&amp;gt;
&amp;lt;head&amp;gt;
&amp;lt;style&amp;gt;
.wrapper {
    background-image: url("img_girl.jpg");
  background-repeat: no-repeat;
}
p{
width: 100%;
heigth: 100%;
padding: 100px 20px;
 background-color: rgba(255, 255, 255, 0.5);  
}
&amp;lt;/style&amp;gt;
&amp;lt;/head&amp;gt;
&amp;lt;body&amp;gt;

&amp;lt;h2&amp;gt;Background Image&amp;lt;/h2&amp;gt;
&amp;lt;div class="wrapper"&amp;gt;
&amp;lt;p&amp;gt;You can specify background images&amp;lt;br&amp;gt;
for any visible HTML element.&amp;lt;br&amp;gt;
In this example, the background image&amp;lt;br&amp;gt;
is specified for a div element.&amp;lt;br&amp;gt;
By default, the background-image&amp;lt;br&amp;gt;
will repeat itself in the direction(s)&amp;lt;br&amp;gt;
where it is smaller than the element&amp;lt;br&amp;gt;
where it is specified. (Try resizing the&amp;lt;br&amp;gt;
browser window to see how the&amp;lt;br&amp;gt;
background image behaves.&amp;lt;/p&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fa69nc3kdtgv6z3bzqlzt.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fa69nc3kdtgv6z3bzqlzt.png" alt=" " width="800" height="480"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Approach 2:&lt;/strong&gt; Using Linear Gradient&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;!DOCTYPE html&amp;gt;
&amp;lt;html&amp;gt;
&amp;lt;head&amp;gt;
&amp;lt;style&amp;gt;
p {
  padding: 100px 20px;
    background-image: url("img_girl.jpg"), linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0.5));
    background-blend-mode: overlay;
  background-repeat: no-repeat;
}
&amp;lt;/style&amp;gt;
&amp;lt;/head&amp;gt;
&amp;lt;body&amp;gt;

&amp;lt;h2&amp;gt;Background Image&amp;lt;/h2&amp;gt;

&amp;lt;p&amp;gt;You can specify background images&amp;lt;br&amp;gt;
for any visible HTML element.&amp;lt;br&amp;gt;
In this example, the background image&amp;lt;br&amp;gt;
is specified for a div element.&amp;lt;br&amp;gt;
By default, the background-image&amp;lt;br&amp;gt;
will repeat itself in the direction(s)&amp;lt;br&amp;gt;
where it is smaller than the element&amp;lt;br&amp;gt;
where it is specified. (Try resizing the&amp;lt;br&amp;gt;
browser window to see how the&amp;lt;br&amp;gt;
background image behaves.&amp;lt;/p&amp;gt;

&amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5cmcndvo62qz5y0m6v2k.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5cmcndvo62qz5y0m6v2k.png" alt=" " width="800" height="480"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.buymeacoffee.com/hardiquedasore" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhqmyq1twcon9ndguelyd.png" alt=" " width="800" height="224"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Follow us on &lt;a href="https://www.instagram.com/commitandpush/" rel="noopener noreferrer"&gt;Instagram &lt;/a&gt;&lt;/p&gt;

</description>
      <category>css</category>
      <category>webdev</category>
      <category>html</category>
    </item>
    <item>
      <title>Generate code snippet for REST API call from Postman</title>
      <dc:creator>Hardique Dasore</dc:creator>
      <pubDate>Sat, 09 Sep 2023 17:01:11 +0000</pubDate>
      <link>https://dev.to/hardiquedasore/generate-code-snippet-for-rest-api-call-from-postman-23ii</link>
      <guid>https://dev.to/hardiquedasore/generate-code-snippet-for-rest-api-call-from-postman-23ii</guid>
      <description>&lt;p&gt;Testing REST APIs in Postman is a norm for all software developers. Once the REST API is tested in Postman, it is time to integrate the same with the frontend interface to fetch or post data.&lt;br&gt;
During the integration phase, if you face a blocker while developing the code for an API call, then Postman is here to help.&lt;br&gt;
Just follow the below-mentioned steps:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Add the REST API call in POST man and initialize the body and headers based on the method (GET or POST)&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyjyzqhg6ielj7h21ppjx.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyjyzqhg6ielj7h21ppjx.png" alt=" " width="800" height="453"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Once you receive the success response, click the code icon in the top right corner. In the dialog box, select the relevant coding language from the dropdown.&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fv3ces8kf4gac00lvlfes.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fv3ces8kf4gac00lvlfes.png" alt=" " width="800" height="467"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Postman will generate a code snippet that you can now copy and paste in your project. &lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F89ej5hghfm4ef486sgti.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F89ej5hghfm4ef486sgti.png" alt=" " width="800" height="469"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;BEWARE: The snippet may require some modification based on your project. &lt;/p&gt;

&lt;p&gt;Happy Coding!&lt;/p&gt;

&lt;p&gt;Follow us on &lt;a href="https://www.instagram.com/commitandpush/" rel="noopener noreferrer"&gt;Instagram &lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.buymeacoffee.com/hardiquedasore" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhqmyq1twcon9ndguelyd.png" alt=" " width="800" height="224"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>restapi</category>
      <category>postman</category>
      <category>postmanapi</category>
    </item>
    <item>
      <title>How to a add link to JSON?</title>
      <dc:creator>Hardique Dasore</dc:creator>
      <pubDate>Thu, 08 Jun 2023 14:08:55 +0000</pubDate>
      <link>https://dev.to/hardiquedasore/how-to-add-link-to-json-49a3</link>
      <guid>https://dev.to/hardiquedasore/how-to-add-link-to-json-49a3</guid>
      <description>&lt;p&gt;In another edition to the JSON series, we can also add clickable links are part of the paragraph in the JSON. We can encapsulate the link in the anchor tag &lt;code&gt;&amp;lt;a href='#'&amp;gt;&amp;lt;/a&amp;gt;&lt;/code&gt;. We can add the redirection link in the href so that the user can redirect to the link on click. This hack helps us in avoiding the creation of a separate variable just for the links.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;!DOCTYPE html&amp;gt;
&amp;lt;html&amp;gt;
&amp;lt;body&amp;gt;
&amp;lt;h2&amp;gt;JSON with clickable link&amp;lt;/h2&amp;gt;
&amp;lt;span id="heading"&amp;gt;&amp;lt;/span&amp;gt;&amp;lt;br/&amp;gt;
&amp;lt;span id="paragraph"&amp;gt;&amp;lt;/span&amp;gt;
&amp;lt;script&amp;gt;
const faq= {
 heading: "&amp;lt;b&amp;gt;Heading 1&amp;lt;/b&amp;gt;", 
 paragraph: "This is a link to &amp;lt;a href='https://www.google.com'&amp;gt;Google&amp;lt;/a&amp;gt;" 
 } 
document.getElementById("heading").innerHTML = faq.heading;
document.getElementById("paragraph").innerHTML = faq.paragraph;
&amp;lt;/script&amp;gt;
&amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;&lt;strong&gt;Note:&lt;/strong&gt; Make sure you use single inverted commas for the link otherwise the JSON will become invalid if we use double inverted commas inside double inverted commas.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;The DOM identifies the HTML element in the JSON and converts the text encapsulated to the link. This will help you code your FAQs page better.&lt;/p&gt;

&lt;p&gt;Happy Coding!&lt;/p&gt;

&lt;p&gt;Follow us on &lt;a href="https://www.instagram.com/commitandpush/" rel="noopener noreferrer"&gt;Instagram &lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.buymeacoffee.com/hardiquedasore" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhqmyq1twcon9ndguelyd.png" alt=" " width="800" height="224"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>json</category>
      <category>html</category>
      <category>webdev</category>
    </item>
    <item>
      <title>How to embed Google Map without API Key?</title>
      <dc:creator>Hardique Dasore</dc:creator>
      <pubDate>Sun, 21 May 2023 01:47:33 +0000</pubDate>
      <link>https://dev.to/hardiquedasore/how-to-embed-google-map-without-api-key-1ii7</link>
      <guid>https://dev.to/hardiquedasore/how-to-embed-google-map-without-api-key-1ii7</guid>
      <description>&lt;p&gt;Make your website more interactive by embedding Google Map for the location of your business. To embed Google maps to your webpage, one doesn't need an API key. &lt;/p&gt;

&lt;p&gt;To embed a Google Map in your webpage, you can follow these steps:&lt;/p&gt;

&lt;p&gt;1) Go to Google and search the location you want to embed in your web page&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frbgv36ury23o2ykvdx5m.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frbgv36ury23o2ykvdx5m.png" alt=" " width="800" height="567"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;2) Maximize the location details in Google page&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fm661ujuaq22z194zjwxc.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fm661ujuaq22z194zjwxc.png" alt=" " width="800" height="567"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;3) Click on the share icon in the location details card&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpgyi2vgzq0635pl4qlmn.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpgyi2vgzq0635pl4qlmn.png" alt=" " width="800" height="567"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;4) Select the "Embed a map" tab in the dialog box&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F18e1vtrs1hht2hjwj7x7.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F18e1vtrs1hht2hjwj7x7.png" alt=" " width="800" height="567"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;5) Copy HTML for the code (iframe) to be added to your webpage&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsdj8l5ydzmana5ospf6i.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsdj8l5ydzmana5ospf6i.png" alt=" " width="800" height="567"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Happy Coding!&lt;/p&gt;

</description>
      <category>googlecloud</category>
    </item>
    <item>
      <title>Steps to adopt micro frontends architecture for your frontend application in Angular</title>
      <dc:creator>Hardique Dasore</dc:creator>
      <pubDate>Fri, 10 Mar 2023 16:07:01 +0000</pubDate>
      <link>https://dev.to/hardiquedasore/steps-to-adopt-micro-frontends-architecture-for-your-frontend-application-in-angular-36ce</link>
      <guid>https://dev.to/hardiquedasore/steps-to-adopt-micro-frontends-architecture-for-your-frontend-application-in-angular-36ce</guid>
      <description>&lt;p&gt;If you have an Angular project with a mono repo that is shared among various teams, you should consider changing the monolithic architecture of your application to micro-frontends using module federation.&lt;/p&gt;

&lt;p&gt;1 Create an nx-worspace using:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npx create-nx-workspace@latest &amp;lt;project name&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;• Select angular and scss&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;2 Change the directory to the project folder using:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;cd &amp;lt;project name&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;3 Open Visual Studio code using:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;code .
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;4 Create separate containers using:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;nx generate @nrwl/angular:app &amp;lt;container name&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;5 Compile and run all containers using:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;nx run &amp;lt;container name&amp;gt;:serve:development - port &amp;lt;port&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;Note: You can also use ng instead of nx&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;6 Use the following command to create new components:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;nx generate @nrwl/angular:component &amp;lt;component name&amp;gt; - project &amp;lt;project name&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;7 Set up module federation in all containers:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm i @angular-architects/module-federation
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;8 Run the following command to add webconfig file to all the containers:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;ng g @angular-architects/module-federation:init
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;• Select container and assign port&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;9 Expose the component you want to use in other containers in webpack.config.js:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;exposes: {
    './Module': './apps/&amp;lt;container-name&amp;gt;/src/app/remote-entry/remote-entry.module.ts',
     },
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;10 Use the exposed module in the routing of app.module.ts of the shell container:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;RouterModule.forRoot(
     [
       {
           path: '&amp;lt;container-name&amp;gt;',
           loadChildren: () =&amp;gt;
           loadRemoteModule({
           remoteEntry: 'http://localhost:&amp;lt;port&amp;gt;/remoteEntry.js',
           type: 'module',
           exposedModule: './Module',
           }).then((m) =&amp;gt; m.RemoteEntryModule),
        }
       ],
       { initialNavigation: 'enabledBlocking' }
      )
    ],
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;11 In order to create a shared service in a shared folder, use:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;ng g @nrwl/angular:lib shared/test-service
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;12 Install ngx-mfe (version 3.0.2):&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm i ngx-mfe
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;13 Create index.ts file and import:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;export * from './lib/shared-test-service.module';
export * from './lib/test-service.service';
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;14 Add the path to tsconfig.base.json:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;"paths": {
          "@micro-frontends/shared/test-service": ["libs/shared/test-service/src/index.ts"]
         }
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;15 Add the shared service to the webpack.config.js file of the container you want to use the service in:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;sharedMappings.register(sharedMappings.register(
         path.join(__dirname, '../../tsconfig.base.json'),
         path.join(__dirname,'../../tsconfig.base.json'),
         [/* mapped paths to share */]);
         ['@micro-frontends/shared/shared/test-service']);]);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;16 In order to use the service, import it into the component:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import{{ TestService }} from '@micro-frontends/shared/test-service'
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;Note: Please change micro-frontends to the name of your project and test-service to the name of your service in the above commands.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Happy Coding!&lt;/p&gt;

</description>
      <category>angular</category>
      <category>microfrontends</category>
      <category>webdev</category>
      <category>javascript</category>
    </item>
    <item>
      <title>How to use tailwindcss to add dark mode to your website?</title>
      <dc:creator>Hardique Dasore</dc:creator>
      <pubDate>Wed, 18 Jan 2023 20:46:47 +0000</pubDate>
      <link>https://dev.to/hardiquedasore/how-to-use-tailwindcss-to-add-dark-mode-to-your-website-3gbb</link>
      <guid>https://dev.to/hardiquedasore/how-to-use-tailwindcss-to-add-dark-mode-to-your-website-3gbb</guid>
      <description>&lt;p&gt;Dark mode has become a popular feature in recent years, as it allows users to reduce eye strain and conserve battery life on their devices. In this blog post, we will show you how to toggle between dark and light mode on your website using Next.js and Tailwind CSS.&lt;/p&gt;

&lt;p&gt;First, let's set up a basic Next.js project. Create a new directory and run the following command to initialize a Next.js project:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npx create-next-app
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Next, we need to install Tailwind CSS. Run the following command in your project directory:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm install tailwindcss
npx tailwindcss init
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In your &lt;code&gt;tailwind.config.js&lt;/code&gt; file, you will need to add the following line to enable the &lt;code&gt;darkMode&lt;/code&gt;class:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;module.exports = {
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
  dark: 'class',
};
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now in App.js add the following piece of code:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import React, { useEffect, useState } from "react";

// Function to toggle modes between dark and light 
// This can be moved into a separate js file in order to share it between pages
function useDarkMode() {
  const [theme, setTheme] = useState(
    typeof window !== "undefined" ? localStorage.theme : "dark"
  );
  const colorTheme = theme === "dark" ? "light" : "dark";

  useEffect(() =&amp;gt; {
    const root = window.document.documentElement;

    root.classList.remove(colorTheme);
    root.classList.add(theme);

    if (typeof window !== "undefined") {
      localStorage.setItem("theme", theme);
    }
  }, [theme]);

  return [colorTheme, setTheme];
}

function App() {
  const [colorTheme, setTheme] = useDarkMode();

  return (
    &amp;lt;div className="dark:bg-zinc-900 bg-white h-screen dark:text-black text-white place-items-center grid"&amp;gt;
      &amp;lt;button className={`bg-gray-500 ${colorTheme !=='dark'?'hover:bg-yellow-400':' hover:bg-blue-400'} text-white p-2 rounded-full`} onClick={() =&amp;gt; setTheme(colorTheme !== "dark"? "light": "dark")}&amp;gt;
//HeroIcons is used for svg vectors
        {colorTheme === 'dark' ? &amp;lt;svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6"&amp;gt;
          &amp;lt;path strokeLinecap="round" strokeLinejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" /&amp;gt;
        &amp;lt;/svg&amp;gt; : &amp;lt;svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6"&amp;gt;
          &amp;lt;path strokeLinecap="round" strokeLinejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" /&amp;gt;
        &amp;lt;/svg&amp;gt;}

      &amp;lt;/button&amp;gt;
    &amp;lt;/div&amp;gt;

  );
}

export default App;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We can also create a separate component for the toggle button but for demo purposes, we have added the piece of code to &lt;code&gt;App.js&lt;/code&gt; file.&lt;/p&gt;

&lt;p&gt;This code uses the &lt;strong&gt;useState&lt;/strong&gt; and &lt;strong&gt;useEffect&lt;/strong&gt; hooks to keep track of the dark/light mode state and sets the background color of the page based on the state. The button toggles the mode state when clicked.&lt;/p&gt;

&lt;p&gt;That's it! With just a few lines of code, you can add a dark mode toggle to your Next.js website using Tailwind CSS. Users will appreciate the ability to switch between dark and light modes to reduce eye strain and save battery life on their devices.&lt;/p&gt;

&lt;p&gt;Code Snippet: &lt;a href="https://github.com/hardiquedasore/dark-mode-tailwindcss" rel="noopener noreferrer"&gt;GitHub: Tailwindcss Dark Mode&lt;/a&gt; &lt;/p&gt;

&lt;p&gt;Happy Coding!&lt;/p&gt;

</description>
      <category>career</category>
      <category>productivity</category>
      <category>tailwindcss</category>
    </item>
    <item>
      <title>Avoid "delete" keyword in JavaScript to remove property</title>
      <dc:creator>Hardique Dasore</dc:creator>
      <pubDate>Wed, 11 Jan 2023 17:53:09 +0000</pubDate>
      <link>https://dev.to/hardiquedasore/avoid-delete-keyword-in-javascript-to-remove-property-32mf</link>
      <guid>https://dev.to/hardiquedasore/avoid-delete-keyword-in-javascript-to-remove-property-32mf</guid>
      <description>&lt;p&gt;The delete keyword is used to remove a property from an object in JavaScript. When a property is deleted, it cannot be accessed. The syntax for using the delete keyword to remove a property is as follows:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;delete objectName.propertyName;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;For example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const myObject = { a: 1, b: 2 };

// Removing the 'a' property from the object
delete myObject.a;
console.log(myObject);  // Output: { b: 2 }
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Using delete on variable will remove variable from memory as well, so be careful and make sure that variable is not being referenced anywhere else before deletion.&lt;/p&gt;

&lt;h2&gt;
  
  
  Deleting property in JavaScript using destructuring
&lt;/h2&gt;

&lt;p&gt;Using destructuring, you can easily create a new object without the property you want to remove. Destructuring allows you to extract properties from an object and assign them to variables. When you destructure an object, you can specify which properties you want to extract and which properties you want to ignore.&lt;/p&gt;

&lt;p&gt;Here's an example of how you can use destructuring to create a new object without a specific property:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const myObject = { a: 1, b: 2, c: 3 };

// Using destructuring to create a new object without the 'b' property
const { b, ...updatedObject } = myObject;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this example, the properties of myObject that are not b is assigned to updatedObject variable. This b variable will contain the value of b property from myObject. This will not mutate the original object &lt;code&gt;myObject&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;You can also use destructuring in a function argument&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;function myFunction({ a, c }) {
    // The 'b' property is not destructured and is therefore not accessible within this function
    console.log(a,c)
}

myFunction(myObject);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this way you can filter out the specific properties that you don't want and also you can use destructuring in function argument to only extract the specific properties you want.&lt;/p&gt;

&lt;p&gt;Happy Coding!&lt;/p&gt;

</description>
      <category>javascript</category>
    </item>
    <item>
      <title>Will AI replace development jobs?</title>
      <dc:creator>Hardique Dasore</dc:creator>
      <pubDate>Tue, 10 Jan 2023 02:21:45 +0000</pubDate>
      <link>https://dev.to/hardiquedasore/will-ai-replace-development-jobs-3khn</link>
      <guid>https://dev.to/hardiquedasore/will-ai-replace-development-jobs-3khn</guid>
      <description>&lt;p&gt;It is a common question whether artificial intelligence (AI) will eventually replace development jobs, and it's a topic that has been debated by experts for many years. While it is certainly true that AI and automation technologies have the potential to revolutionize the way we work, it is unlikely that they will completely replace development jobs in the near future.&lt;/p&gt;

&lt;p&gt;One of the main reasons that AI is unlikely to replace development jobs is because software development is a highly creative and intellectual task that requires a deep understanding of complex concepts and abstract thinking. While AI algorithms can certainly be trained to perform certain tasks, they are not yet capable of the kind of creative problem-solving and decision-making that is required to design and build software applications.&lt;/p&gt;

&lt;p&gt;Additionally, there are many aspects of software development that are difficult to automate, such as debugging, testing, and maintaining code. These tasks often require a human touch and involve a lot of trial and error, which is difficult for AI algorithms to replicate.&lt;/p&gt;

&lt;p&gt;It is also worth noting that software development is a constantly evolving field, with new programming languages, frameworks, and technologies being developed all the time. Keeping up with these changes requires a level of flexibility and adaptability that is difficult for AI algorithms to achieve.&lt;/p&gt;

&lt;p&gt;Overall, it is unlikely that AI will completely replace development jobs anytime soon. While it may automate certain tasks and change the way we work, it is unlikely to&lt;/p&gt;

&lt;p&gt;Fun fact: This blog was generated using ChatGPT.&lt;/p&gt;

&lt;p&gt;Happy Coding!&lt;/p&gt;

</description>
      <category>ai</category>
      <category>openai</category>
      <category>discuss</category>
      <category>community</category>
    </item>
    <item>
      <title>Different types of cases in variable naming convention</title>
      <dc:creator>Hardique Dasore</dc:creator>
      <pubDate>Tue, 10 Jan 2023 01:49:58 +0000</pubDate>
      <link>https://dev.to/hardiquedasore/different-types-of-cases-in-variable-naming-convention-p62</link>
      <guid>https://dev.to/hardiquedasore/different-types-of-cases-in-variable-naming-convention-p62</guid>
      <description>&lt;p&gt;There are several different conventions for naming variables in code, and the choice of which one to use often depends on the programming language and the style guide being followed. Here are some common variable naming conventions:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Pascal case:&lt;/strong&gt; Words in the variable name are concatenated, with the first letter of every word being capitalized. For example, &lt;code&gt;MyVariableName&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Snake case:&lt;/strong&gt; Words in the variable name are concatenated and separated by underscores. For example, &lt;code&gt;my_variable_name&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Camel case or Dromedary case:&lt;/strong&gt; Words in the variable name are concatenated, with the first letter of each word except the first being capitalized. For example, &lt;code&gt;myVariableName&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Kebab case:&lt;/strong&gt; Words in the variable name are concatenated and separated by hyphens. For example, &lt;code&gt;my-variable-name&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Screaming snake case:&lt;/strong&gt; Similar to snake case, but all letters are capitalized. For example, &lt;code&gt;MY_VARIABLE_NAME&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Train case or Screaming kebab case:&lt;/strong&gt; Similar to kebab case, but all letters are capitalized. For example, &lt;code&gt;MY-VARIABLE-NAME&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Flat case:&lt;/strong&gt; Words in the variable name are concatenated, with no capitalization or punctuation. For example, &lt;code&gt;myvariablename&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Upper case:&lt;/strong&gt; All letters in the variable name are capitalized. This is sometimes used for constants that should not be modified. For example, &lt;code&gt;MYVARIABLENAME&lt;/code&gt;.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;It's important to follow a consistent naming convention in your code to make it easier to read and understand. Some programming languages have specific conventions that are followed by most developers, so it's a good idea to familiarize yourself with these conventions if you're working with a new language.&lt;/p&gt;

&lt;p&gt;Happy Coding!&lt;/p&gt;

</description>
      <category>coding</category>
      <category>codenewbie</category>
      <category>webdev</category>
      <category>beginners</category>
    </item>
  </channel>
</rss>
