<?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: Madhuja Mitra</title>
    <description>The latest articles on DEV Community by Madhuja Mitra (@madhujamitra).</description>
    <link>https://dev.to/madhujamitra</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.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F977504%2F33ce8870-af31-4350-bab9-b071851bed35.png</url>
      <title>DEV Community: Madhuja Mitra</title>
      <link>https://dev.to/madhujamitra</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/madhujamitra"/>
    <language>en</language>
    <item>
      <title>AI and Networking: The Dynamic Duo Reshaping Our Digital Future</title>
      <dc:creator>Madhuja Mitra</dc:creator>
      <pubDate>Sun, 13 Oct 2024 22:03:34 +0000</pubDate>
      <link>https://dev.to/madhujamitra/ai-and-networking-the-dynamic-duo-reshaping-our-digital-future-3bn</link>
      <guid>https://dev.to/madhujamitra/ai-and-networking-the-dynamic-duo-reshaping-our-digital-future-3bn</guid>
      <description>&lt;p&gt;One of the interesting things which keeps me wondering is what AI will bring to networking. What capabilities can we expect in the future? With 6G, we can anticipate faster speeds, but what else is on the horizon?&lt;/p&gt;

&lt;p&gt;After diving into some research, I stumbled upon some fascinating insights that are worth exploring. Currently, we're just scratching the surface of AI's potential in networking, but the future looks incredibly promising.&lt;/p&gt;

&lt;p&gt;Let's start with the cool stuff AI is already doing in networking. According to a recent Forbes article (&lt;a href="https://www.forbes.com/sites/rscottraynovich/2024/01/23/what-ai-means-for-networking-infrastructure-in-2024/" rel="noopener noreferrer"&gt;https://www.forbes.com/sites/rscottraynovich/2024/01/23/what-ai-means-for-networking-infrastructure-in-2024/&lt;/a&gt;), AI is like having a super-smart assistant for your network. It's not just about fixing problems; it's about predicting and preventing them before they even happen. Imagine having a crystal ball for your network - that's what AI is becoming!&lt;/p&gt;

&lt;p&gt;One of the coolest things I learned is how AI can detect time series anomalies. It's like having a network detective that can spot patterns and connections that even the most experienced network guru might miss. This means faster problem-solving and less downtime for businesses.&lt;/p&gt;

&lt;p&gt;But here's where it gets really interesting. AI isn't just about fixing problems; it's about making your network smarter. It can predict user experiences based on network conditions and automatically adjust bandwidth. Think about it - your network could optimize itself in real-time based on what apps you're using. How cool is that?&lt;/p&gt;

&lt;p&gt;And for all the IT folks out there, AI is becoming like a virtual team member. It can suggest fixes for network issues or even fix them automatically. This means less time troubleshooting and more time for the fun, creative stuff in IT.&lt;/p&gt;

&lt;p&gt;Looking ahead, the possibilities are mind-blowing. With 6G on the horizon, AI will be crucial in managing these super-complex networks. We might even see fully autonomous networks that can manage, heal, and optimize themselves with minimal human input. It's like your network is becoming alive and intelligent!&lt;/p&gt;

&lt;p&gt;But it's not all smooth sailing. There are challenges to overcome. We need to make sure we have the right data to feed these AI systems, and there's a growing need for IT pros to upskill and learn how to work alongside AI. Plus, we can't ignore the ethical concerns about data privacy and AI decision-making.&lt;/p&gt;

&lt;p&gt;As we move forward, it's clear that AI in networking isn't just a fancy add-on; it's becoming the backbone of how we'll manage and optimize our digital world. From predicting network issues to creating self-optimizing systems, AI is set to revolutionize how we think about and interact with networks.&lt;/p&gt;

&lt;p&gt;So, next time you're browsing the web or streaming your favorite show, remember there might be an AI working behind the scenes to make sure your experience is smooth and seamless. The future of networking is here, and it's powered by AI!&lt;/p&gt;

&lt;p&gt;What do you think about these developments? Are you excited about the potential of AI in networking, or do you have concerns? Let me know in the comments below!&lt;/p&gt;

&lt;p&gt;Citations:&lt;br&gt;
[1] &lt;a href="https://www.juniper.net/us/en/research-topics/what-is-ai-for-networking.html" rel="noopener noreferrer"&gt;https://www.juniper.net/us/en/research-topics/what-is-ai-for-networking.html&lt;/a&gt;&lt;br&gt;
[2] &lt;a href="https://www.forbes.com/sites/rscottraynovich/2024/01/23/what-ai-means-for-networking-infrastructure-in-2024/" rel="noopener noreferrer"&gt;https://www.forbes.com/sites/rscottraynovich/2024/01/23/what-ai-means-for-networking-infrastructure-in-2024/&lt;/a&gt;&lt;/p&gt;

</description>
      <category>network</category>
      <category>ai</category>
    </item>
    <item>
      <title>Understanding Abstraction and Remote Procedure Calls in Distributed Systems</title>
      <dc:creator>Madhuja Mitra</dc:creator>
      <pubDate>Fri, 30 Aug 2024 02:36:51 +0000</pubDate>
      <link>https://dev.to/madhujamitra/understanding-abstraction-and-remote-procedure-calls-in-distributed-systems-239p</link>
      <guid>https://dev.to/madhujamitra/understanding-abstraction-and-remote-procedure-calls-in-distributed-systems-239p</guid>
      <description>&lt;p&gt;Distributed systems are inherently complex due to the need for multiple components to communicate over a network. Two key concepts that help manage this complexity are abstraction and Remote Procedure Calls (RPCs). This article explores both abstraction and RPC in distributed systems, highlighting their significance and usage.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Abstraction in Distributed Systems&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Abstraction in software development involves hiding complex details to present a simpler interface for users and developers. In distributed systems, abstraction is crucial for several reasons:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Encapsulating Complexity&lt;/strong&gt;: Distributed systems involve numerous components that must interact over networks, manage data consistency, and handle failures. Abstraction simplifies these complexities by providing models like APIs or service interfaces, allowing developers to focus on higher-level functionalities without delving into the intricate details of the underlying processes.&lt;br&gt;
&lt;strong&gt;Separation of Concerns&lt;/strong&gt;: Abstraction enables different system parts, such as computation, networking, and storage, to be managed independently. This separation allows developers to concentrate on specific tasks without needing to understand how other system parts operate.&lt;br&gt;
&lt;strong&gt;Middleware as an Abstraction Layer&lt;/strong&gt;: Middleware provides common services to applications, hiding the complexities of communication, data management, and message passing. This allows developers to build applications without dealing with low-level issues.&lt;br&gt;
&lt;strong&gt;Handling Faults and Consistency&lt;/strong&gt;: Abstraction helps maintain reliability and data consistency in distributed systems by offering built-in mechanisms like replication and consensus algorithms, which developers can leverage without having to implement them from scratch.&lt;br&gt;
&lt;strong&gt;Resource Management&lt;/strong&gt;: Cloud platforms use abstraction to simplify resource management, such as virtual machines or containers, allowing developers to use resources without worrying about hardware specifics.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Remote Procedure Call (RPC)&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;RPC is a protocol that enables a program to execute a procedure on a different machine over a network, mimicking a local procedure call. It simplifies distributed computing by abstracting network communication details and providing a straightforward interface for developers.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Transparency and Simplicity&lt;/strong&gt;: RPC aims to make remote calls appear like local ones, hiding complexities such as network communication and data serialization, thereby easing the development of distributed systems.&lt;br&gt;
&lt;strong&gt;Client-Server Model&lt;/strong&gt;: RPC operates on a client-server model where the client requests a procedure execution on the server, which processes the request and returns the result to the client.&lt;br&gt;
Stubs and Skeletons: RPC uses client and server stubs. The client stub packages the procedure's parameters and sends them over the network, while the server stub unpacks the message and executes the procedure.&lt;br&gt;
&lt;strong&gt;Marshalling and Unmarshalling&lt;/strong&gt;: These processes involve converting data to a network-friendly format (marshalling) and back to a usable format on the receiving end (unmarshalling).&lt;br&gt;
&lt;strong&gt;Error Handling&lt;/strong&gt;: RPC must manage errors like network failures and server crashes, which adds complexity compared to local calls.&lt;br&gt;
&lt;strong&gt;Popular RPC Frameworks&lt;/strong&gt;: Frameworks like gRPC, JSON-RPC, and Apache Thrift help implement RPC, each offering unique features and supporting various use cases.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Conclusion&lt;/strong&gt;&lt;br&gt;
Abstraction and RPC are essential for simplifying the development and management of distributed systems. Abstraction hides the complex details of system architecture, while RPC simplifies communication between system components. Together, they enable developers to build robust, scalable, and efficient distributed applications without getting overwhelmed by the intricate details of network communication and system management.&lt;/p&gt;

&lt;p&gt;Reference :&lt;br&gt;
&lt;a href="https://www.educative.io/courses/grokking-modern-system-design-interview-for-engineers-managers/network-abstractions-remote-procedure-calls" rel="noopener noreferrer"&gt;https://www.educative.io/courses/grokking-modern-system-design-interview-for-engineers-managers/network-abstractions-remote-procedure-calls&lt;/a&gt;&lt;/p&gt;

</description>
      <category>distributedsystems</category>
      <category>rpc</category>
      <category>systemdesign</category>
    </item>
    <item>
      <title>AI Chatbots in Frontend Development: Revolutionizing User Interaction with TensorFlow.js, Dialogflow, and Algorithmia</title>
      <dc:creator>Madhuja Mitra</dc:creator>
      <pubDate>Mon, 19 Aug 2024 07:35:09 +0000</pubDate>
      <link>https://dev.to/madhujamitra/ai-chatbots-in-frontend-development-revolutionizing-user-interaction-with-tensorflowjs-dialogflow-and-algorithmia-140n</link>
      <guid>https://dev.to/madhujamitra/ai-chatbots-in-frontend-development-revolutionizing-user-interaction-with-tensorflowjs-dialogflow-and-algorithmia-140n</guid>
      <description>&lt;p&gt;In 2024, the integration of AI chatbots in frontend development has a significant advance. Which offering users personalized and contextually relevant interactions. This article dives into how tools like TensorFlow.js, Dialogflow, and Algorithmia, how the are transforming the way developers create dynamic user experiences for Chatbot.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The Role of AI Chatbots&lt;/strong&gt;&lt;br&gt;
AI chatbots utilize technologies such as Natural Language Processing (NLP), Machine Learning (ML), and deep learning to simulate human conversation. That is making them an essential component of modern web applications. They are adapt with understanding user queries and providing meaningful responses.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Key Tools for AI Chatbot Development&lt;/strong&gt;&lt;br&gt;
&lt;strong&gt;&lt;em&gt;TensorFlow.js:&lt;/em&gt;&lt;/strong&gt;&lt;br&gt;
TensorFlow.js is a JavaScript library that enables developers to build and train machine learning models in the browser,. Which allowing for real-time processing and interaction. Whether utilizing pre-trained models or training custom ones, TensorFlow.js offers considerable flexibility in chatbot development.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;Dialogflow:&lt;/em&gt;&lt;/strong&gt;&lt;br&gt;
Dialogflow, powered by Google. This is a widely-used platform for creating conversational interfaces. It comes with pre-built agents and supports multiple languages, which simplifying the process of building chatbots. This lead to an effectively understand and respond to user queries.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;Algorithmia:&lt;/em&gt;&lt;/strong&gt;&lt;br&gt;
Algorithmia serves as a marketplace for AI algorithms. This providing a variety of pre-trained models that can seamlessly integrate into applications. Developers can utilize Algorithmia to enhance chatbot capabilities, such as sentiment analysis and language translation.Its API-based approach makes the integration process straightforward and quick.&lt;/p&gt;

&lt;p&gt;Integrating AI chatbots into frontend development has many real-world applications. In customer service, chatbots can efficiently handle a large volume of queries, providing instant answers to common questions,which allowing human agents to focus on more complex issues. In e-commerce, chatbots can assist users in navigating product catalogs and providing personalized recommendations based on their preferences and past behavior.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;Challenges and Considerations&lt;/em&gt;&lt;/strong&gt;&lt;br&gt;
While AI chatbots offer several advantages, developers need to consider challenges such as data privacy, complexity, and seamless integration with existing frontend frameworks and applications.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;Conclusion&lt;/em&gt;&lt;/strong&gt;&lt;br&gt;
As we progress through 2024, the integration of AI chatbots in frontend development is increasing. Tools like TensorFlow.js, Dialogflow, and Algorithmia empower developers to create responsive chatbots that enhance user interaction by providing personalized and contextually relevant responses. Leveraging these technologies allows businesses to offer superior user experiences with deepen customer engagement.&lt;/p&gt;

&lt;p&gt;Articles to read(reference):&lt;br&gt;
&lt;a href="https://digitalfractal.com/beginners-guide-to-ai-chatbot-development/" rel="noopener noreferrer"&gt;https://digitalfractal.com/beginners-guide-to-ai-chatbot-development/&lt;/a&gt;&lt;br&gt;
&lt;a href="https://dev.to/blarzhernandez/top-7-frontend-trends-and-predictions-for-2024-you-should-watch-out-according-to-experts-239n"&gt;https://dev.to/blarzhernandez/top-7-frontend-trends-and-predictions-for-2024-you-should-watch-out-according-to-experts-239n&lt;/a&gt;&lt;/p&gt;

</description>
      <category>ai</category>
      <category>llm</category>
      <category>tensorflow</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Enhancing Web Performance with Next.js: Lazy Loading, Image Optimization, and Server-Side Rendering</title>
      <dc:creator>Madhuja Mitra</dc:creator>
      <pubDate>Thu, 15 Aug 2024 07:30:47 +0000</pubDate>
      <link>https://dev.to/madhujamitra/enhancing-web-performance-with-nextjs-lazy-loading-image-optimization-and-server-side-rendering-2k8p</link>
      <guid>https://dev.to/madhujamitra/enhancing-web-performance-with-nextjs-lazy-loading-image-optimization-and-server-side-rendering-2k8p</guid>
      <description>&lt;p&gt;Web performance is crucial in delivering a seamless user experience. In today's fast-paced digital world, optimizing web pages to load quickly and efficiently is more important than ever. This article explores key strategies for page optimization, focusing on lazy loading, image handling in Next.js, server-side rendering, and critical performance metrics like FCP and LCP.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Lazy Loading&lt;/strong&gt;&lt;br&gt;
Lazy loading is a technique that delays the loading of non-essential resources until they are actually needed by the user. This can significantly improve initial load times by prioritizing the content that users see first. In Next.js, lazy loading can be easily implemented using dynamic imports, which ensures that components and images are only loaded when they enter the viewport.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Image Optimization in Next.js&lt;/strong&gt;&lt;br&gt;
Images often contribute the most to a web page's load time. Next.js offers built-in image optimization features that automatically adjust image sizes and formats, delivering the best quality at the smallest size possible. The next/image component allows for responsive image loading, adaptive formats, and lazy loading by default, making it a powerful tool in enhancing performance.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Server-Side Rendering (SSR)&lt;/strong&gt;&lt;br&gt;
Server-side rendering (SSR) is a process where the page is rendered on the server before being sent to the user's browser. This approach can lead to faster initial page loads and better SEO performance, as search engines can easily crawl the pre-rendered content. Next.js makes it straightforward to implement SSR, allowing you to render pages on the server and send fully constructed HTML to the client.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;FCP and LCP&lt;/strong&gt;&lt;br&gt;
First Contentful Paint (FCP) and Largest Contentful Paint (LCP) are critical performance metrics that measure the time it takes for a web page to load its first and largest visual elements, respectively. Optimizing these metrics is essential for improving user experience. By leveraging lazy loading, server-side rendering, and image optimization in Next.js, you can significantly reduce FCP and LCP times, leading to faster and more responsive websites.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;Useful Links to Explore Further&lt;/em&gt;&lt;/strong&gt;&lt;br&gt;
&lt;em&gt;&lt;a href="https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading" rel="noopener noreferrer"&gt;Next.js Documentation on Lazy Loading&lt;/a&gt;&lt;br&gt;
&lt;a href="https://nextjs.org/docs/pages/building-your-application/optimizing/images" rel="noopener noreferrer"&gt;Image Optimization in Next.js&lt;/a&gt;&lt;br&gt;
&lt;a href="https://nextjs.org/docs/pages/building-your-application/rendering/server-side-rendering" rel="noopener noreferrer"&gt;Server-Side Rendering in Next.js&lt;/a&gt;&lt;br&gt;
&lt;a href="https://web.dev/articles/lcp#:~:text=Despite%20both%20using%20%22contentful%22%20in,intented%20to%20be%20more%20selective." rel="noopener noreferrer"&gt;Understanding FCP and LCP&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;These strategies, when combined, can dramatically enhance the performance of your Next.js application, leading to better user engagement and satisfaction.&lt;/p&gt;

</description>
      <category>nextjs</category>
      <category>seo</category>
      <category>fcp</category>
      <category>javascript</category>
    </item>
    <item>
      <title>Fullstack architecture for understanding.</title>
      <dc:creator>Madhuja Mitra</dc:creator>
      <pubDate>Thu, 09 Nov 2023 00:22:59 +0000</pubDate>
      <link>https://dev.to/madhujamitra/fullstack-architecture-for-understanding-a8i</link>
      <guid>https://dev.to/madhujamitra/fullstack-architecture-for-understanding-a8i</guid>
      <description>&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmi6aqcl3va3qg23yu8yc.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmi6aqcl3va3qg23yu8yc.png" alt="Image description" width="800" height="441"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Above is the architecture flow for full-stack for the understanding of how data flow. &lt;/p&gt;

&lt;p&gt;Let's break down this full-stack architecture diagram into its different parts:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Frontend:&lt;/strong&gt;&lt;br&gt;
Next.js: It is a React framework that enables functionalities like server-side rendering and generating static websites. These features can improve the performance and SEO of React applications.&lt;br&gt;
React.js: It is a JavaScript library for building user interfaces through a component-based architecture. React is the foundation upon which Next.js is built.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Backend:&lt;/strong&gt;&lt;br&gt;
Node.js + Express: This is the server environment. Node.js is a JavaScript runtime that allows you to run JavaScript on the server, while Express.js is a lightweight framework that runs on top of Node.js. It simplifies the process of building web servers and handling HTTP requests.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;GraphQL Ecosystem:&lt;/strong&gt;&lt;br&gt;
Apollo Client: This is the state management library used in the frontend (Next.js/React.js). It enables the frontend to send GraphQL queries and mutations to a GraphQL server and manage the data and state based on the server's responses.&lt;br&gt;
Apollo Server: It is an implementation of a GraphQL server that integrates with Node.js and Express. It processes GraphQL queries and mutations, fetching data from databases or other APIs as needed.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;ORM:&lt;/strong&gt;&lt;br&gt;
ORM (Object-Relational Mapping): This is a programming technique for converting data between incompatible type systems using object-oriented programming languages. It's an abstraction layer that makes it easier to work with the database in a more object-oriented way.&lt;br&gt;
Sequelize/TypeORM/Mongoose: These are specific implementations of ORMs. Sequelize and TypeORM are typically used with SQL databases, while Mongoose is used with MongoDB, a NoSQL database.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Database:&lt;/strong&gt;&lt;br&gt;
SQL Database: This category includes relational databases like PostgreSQL, MySQL, and Microsoft SQL Server that use SQL (Structured Query Language) to manage and manipulate data.&lt;br&gt;
NoSQL Database: This includes non-relational databases like MongoDB, Cassandra, and Couchbase, which are designed to scale out using distributed architectures and are often used for large data sets or for data that doesn't fit well into tables.&lt;/p&gt;

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

</description>
      <category>fullstack</category>
      <category>react</category>
      <category>nextjs</category>
      <category>graphql</category>
    </item>
    <item>
      <title>Call API and get the value</title>
      <dc:creator>Madhuja Mitra</dc:creator>
      <pubDate>Wed, 23 Nov 2022 19:41:04 +0000</pubDate>
      <link>https://dev.to/madhujamitra/call-api-and-get-the-value-2295</link>
      <guid>https://dev.to/madhujamitra/call-api-and-get-the-value-2295</guid>
      <description>&lt;p&gt;Angular project:&lt;/p&gt;

&lt;p&gt;we are make an API call to fetch value and display it on the UI for angular project.&lt;/p&gt;

&lt;p&gt;I are using &lt;a href="https://jsonplaceholder.typicode.com/" rel="noopener noreferrer"&gt;https://jsonplaceholder.typicode.com/&lt;/a&gt; for getting Fake API calls for json value and using Angular v15.&lt;/p&gt;

&lt;p&gt;Step 1. Angular project need to be created. Here my project name is API calls.&lt;/p&gt;

&lt;p&gt;Step 2. Create a service , and we will be fetching the from the MOCK API.&lt;/p&gt;

&lt;p&gt;Note a: We need to import httpClient for communicating API calls in Angular.&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%2F7slsl2k3ujrdjmeaysbp.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%2F7slsl2k3ujrdjmeaysbp.png" alt="Image description" width="550" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Note b: we need to import the HttpClientModule in app.module.ts to define the functionality of httpClientModule.&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%2F5mc4ajcinodsqbwwdtea.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%2F5mc4ajcinodsqbwwdtea.png" alt="Image description" width="588" height="565"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Step 3. Subscribe the value from the services to fetch the value the UI in new data component.&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%2F426gl42qsjscu5xzn1wl.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%2F426gl42qsjscu5xzn1wl.png" alt="Image description" width="625" height="462"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Step 4. Displaying the value in the UI&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%2Fmqugy7z0zp9jyzvh9qig.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%2Fmqugy7z0zp9jyzvh9qig.png" alt="Image description" width="658" height="353"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Step 5. Dont forget to connect the component to the app.component.html&lt;/p&gt;

&lt;p&gt;you can see the value from the API call easily :)&lt;/p&gt;

&lt;blockquote&gt;
&lt;/blockquote&gt;

</description>
      <category>tutorial</category>
      <category>learning</category>
      <category>programming</category>
      <category>postgressql</category>
    </item>
  </channel>
</rss>
