<?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: syed shaheer</title>
    <description>The latest articles on DEV Community by syed shaheer (@sdshaheer).</description>
    <link>https://dev.to/sdshaheer</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%2F1117231%2F0f7541b1-4ec0-4f54-8ff3-1e5e9c34f402.png</url>
      <title>DEV Community: syed shaheer</title>
      <link>https://dev.to/sdshaheer</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/sdshaheer"/>
    <language>en</language>
    <item>
      <title>Why We Need Kubernetes: Simplifying Cloud Application Deployment</title>
      <dc:creator>syed shaheer</dc:creator>
      <pubDate>Fri, 25 Oct 2024 06:08:23 +0000</pubDate>
      <link>https://dev.to/sdshaheer/why-we-need-kubernetes-simplifying-cloud-application-deployment-2b2g</link>
      <guid>https://dev.to/sdshaheer/why-we-need-kubernetes-simplifying-cloud-application-deployment-2b2g</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;Deploying applications on cloud platforms used to be a complex task. Before Kubernetes, managing containers and moving applications between cloud providers was often time-consuming and frustrating. In this article, we'll look at the challenges of deploying applications before Kubernetes and how it simplifies these processes today.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is Kubernetes?
&lt;/h2&gt;

&lt;p&gt;Kubernetes (often abbreviated as K8s) is an open-source platform designed to automate the deployment, scaling, and management of containerized applications.&lt;/p&gt;

&lt;h2&gt;
  
  
  Challenges Before Kubernetes
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Before Kubernetes, developers had to set up and manage each container manually. If a container crashed, someone had to restart it. This manual work led to delays and made managing applications more complicated.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Scaling applications to handle more users was tricky. Engineers often had to guess how many resources they needed and manually adjust them. This led to wasted resources and higher costs.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;If something went wrong, like a container failing or a server crashing, developers had to manually fix the issue. &lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;One of the significant challenges before Kubernetes was the difficulty of switching between cloud providers. Each provider offered its own set of tools and services. Applications were often designed specifically for one cloud environment, meaning that transitioning to another cloud provider requires extensive rewrites of both code and configurations. For instance, moving from AWS to GCP or DigitalOcean would require a complete hectic process of cloud-native setups, making the entire process not only complex .&lt;/p&gt;

&lt;h2&gt;
  
  
  How Kubernetes Solves These Problems
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Kubernetes automatically manages containers. If a container fails, Kubernetes restarts it without human intervention, ensuring applications run smoothly.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Kubernetes allows applications to scale up or down automatically based on user demand&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Kubernetes uses the same configuration files for all cloud providers. This means moving applications from AWS to GCP or Azure is much simpler, reducing the need for extensive rewrites &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Kubernetes automatically checks the health of applications and replaces any failed containers. It can also roll back to previous versions if there are issues with new deployments.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;You might wonder why, if Kubernetes addresses many challenges, organizations still prefer cloud providers like AWS, GCP, and Azure. While deploying Kubernetes offers greater control and customization, many companies choose public cloud platforms because they provide significant benefits such as scalability, reduced management overhead, cost efficiency, and integrated services.&lt;/p&gt;

&lt;p&gt;Organizations can still leverage Kubernetes by deploying it on these cloud providers, combining the flexibility of Kubernetes with the advantages of cloud infrastructure to enhance their operations and simplify deployment.&lt;/p&gt;

&lt;p&gt;Hope this info was useful . Thank you :)&lt;/p&gt;

</description>
    </item>
    <item>
      <title>UseTransition Hook</title>
      <dc:creator>syed shaheer</dc:creator>
      <pubDate>Mon, 21 Oct 2024 14:25:59 +0000</pubDate>
      <link>https://dev.to/sdshaheer/usetransition-hook-a7p</link>
      <guid>https://dev.to/sdshaheer/usetransition-hook-a7p</guid>
      <description>&lt;p&gt;When building interactive user Interfaces, performance is a key aspect. If your app is slow or not responsive most users are going to leave the website immediately. One way to improve the performance of React application is by using the useTransition hook.&lt;/p&gt;

&lt;p&gt;Let us see a simple React application to understand useTransistion hook in a better way.&lt;br&gt;
&lt;/p&gt;

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

export default function App() {
  const [input,setInput] = useState('')
  const [list,setList] = useState([])

  const handleChange = (e) =&amp;gt;{
    setInput(e.target.value)
    const lis=[]
    for(let i=0;i&amp;lt;10000;i++){
      lis.push(e.target.value) 
    }
    setList(lis)
  }
  return (
    &amp;lt;div&amp;gt;
     &amp;lt;input onChange={handleChange} value={input}/&amp;gt;
     {list.map((l)=&amp;gt;{
       return &amp;lt;div&amp;gt;{l}&amp;lt;/div&amp;gt;
     })}
    &amp;lt;/div&amp;gt;
  );
}

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

&lt;/div&gt;



&lt;p&gt;we have 2 piece of states, one is used to store input text value that we enter in the input field, and the other state is used to store a list of values.&lt;/p&gt;

&lt;p&gt;Every time when we change the value in the input field it calls the handleChange method. The handle change method does the following tasks: 1) first, it sets the input field value to the input state. 2) second we declare an empty list and after that, it will loop through 10000 times to add the input state to a temporary list and finally we add the temporary list to the list state.&lt;/p&gt;

&lt;p&gt;so the secondary task has a lot of data and really time-consuming computation. If we run this application and type in the input field you notice it's very sluggish. It took a long time to display content on screen and we need to fix this problem.&lt;/p&gt;

&lt;p&gt;To fix this problem we need to understand what is going on. Let's see how React works, when we make a state change ( for example consider setInput and setList state changes ) it tries to combine together all the different state changes that we make into one call and then it's going to make them all at once before rerendering our application. In our application, it is going to combine together our setInput and setList states. our setList takes a long time because it has gone through a massive for-loop and adds a bunch of elements to the list and then rerenders all those elements to the screen.&lt;/p&gt;

&lt;p&gt;Due to this React behavior rendering out change for setInput and setList is very slow. To fasten this behavior we can set the input state to have higher priority, which runs ahead of time, and setList which is slow run at a later time because it has much lower priority. That's what useTransistion allows us to do. we rank the states based on their importance.&lt;/p&gt;

&lt;p&gt;useTransistion gives us an array of values. isPending: a boolean indicating whether the transition is currently in progress or not. startTransition: a function that can be used to start the transition.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import {useTransition} from 'react'

const [isPending,startTransition] = useTransition()

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

&lt;/div&gt;



&lt;p&gt;By default, all state changes in React are high priority and they all run one after the other until they all are finished and then it's going to render out to the screen. what we can do is we can wrap the second task in the handle change method using startTransistion function and say to React that it is low priority task and we will only render it out only if we have time.&lt;br&gt;
&lt;/p&gt;

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

export default function App() {
  const [input,setInput] = useState('')
  const [list,setList] = useState([])
  const [isPending,startTransition] = useTransition()

  const handleChange = (e) =&amp;gt;{
    setInput(e.target.value)
    startTransition(()=&amp;gt;{
      const lis=[]
      for(let i=0;i&amp;lt;10000;i++){
        lis.push(e.target.value) 
      }
      setList(lis)
    })
  }
  return (
    &amp;lt;div&amp;gt;
     &amp;lt;input onChange={handleChange} value={input}/&amp;gt;
     {list.map((l)=&amp;gt;{
       return &amp;lt;div&amp;gt;{l}&amp;lt;/div&amp;gt;
     })}
    &amp;lt;/div&amp;gt;
  );
}

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

&lt;/div&gt;



&lt;p&gt;As soon as high priority task (setInput) is done it will render to the screen and then a little bit later when lower-priority stuff is done the list is shown on the screen. By doing like this we can increase the performance of React app.&lt;/p&gt;

&lt;p&gt;we should have to use useTransistion when we absolutely need it because by using useTransistion we are making our app to do more renders. Before using useTransistion hook our app only render once when input was changed and when we used useTransistion hook our application did two separate renders one where one for the input changed and the other when the list is changed.&lt;/p&gt;

&lt;p&gt;It was recommended to use this hook when you are specifically running into performance issues. Hope this blog is very helpful.&lt;/p&gt;

&lt;p&gt;Thank you :)&lt;/p&gt;

</description>
    </item>
    <item>
      <title>WebHooks</title>
      <dc:creator>syed shaheer</dc:creator>
      <pubDate>Sun, 20 Oct 2024 16:20:38 +0000</pubDate>
      <link>https://dev.to/sdshaheer/webhooks-2km0</link>
      <guid>https://dev.to/sdshaheer/webhooks-2km0</guid>
      <description>&lt;p&gt;when 2 computer systems want to communicate with each other there are many ways to do it. One way is the client system polls the other system which means it keeps asking the other system if there is new information. imagine if you wanted to know if your friend had sent you a text message but you had to check your phone every minute to see if there was a new message. client keeps making requests at a predefined interval until a certain desirable state or suitable response is achieved. This process is called polling and causes a lot of resources wasted on both the client side and server side.&lt;/p&gt;

&lt;p&gt;Another way is you have to maintain an open connection which means the systems stay connected all the time. imagine you had to hold your phone up to your ear all day just because your friend decided to call you. it can be fast but not practical in all solutions.&lt;/p&gt;

&lt;p&gt;To resolve these issues webHooks concept was introduced. Before diving into webHook we should know what is event-driven API because webhook follows event-driven architecture.&lt;/p&gt;

&lt;h2&gt;
  
  
  what is event-driven APS?
&lt;/h2&gt;

&lt;p&gt;Event-driven APIs, refer to a design pattern where an application sends real-time notifications to other applications or services in response to specific events. These events can include actions like data updates, status changes, or triggers that occur within the sending application.&lt;/p&gt;

&lt;p&gt;In webHooks, one system tells the other system what URL it should send information to when there is new information available. let's say you have a social media application that allows users to post updates and you want to notify users when there is a new update. Without webhook, you need to continuously pull the server to check if there is any new update.&lt;/p&gt;

&lt;p&gt;whenever a client registers a webhookurl with a server it essentially telling that send me the updates to url whenever something relevant happens. server then can use the URL to send HTTP post requests to the client whenever a relevant event occurs. whenever the server sends an HTTP post request to the web URL, it includes data about the event in the request body. This data can be in any format that both the server and client can understand such as JSON and XML. The client can then use this data to update its own state and display new information to the user.&lt;/p&gt;

&lt;p&gt;One of the major advantages is they reduce the load on servers by eliminating the need for clients to constantly poll for updates. It allows the server to notify the client application only when new events occur. webhooks are used by many tech companies like GitHub, Slack, Stripe, etc. to power their application.&lt;/p&gt;

&lt;p&gt;There are a lot of differences between HTTP/REST and webHooks. HTTP/REST require client to actively poll for updates whereas webhooks enables servers to push updates to client as soon as they become available. webhooks are triggered by specific events while polling is time driven meaning the client has to keep checking the server at regular intervals even if no update is available.&lt;/p&gt;

&lt;p&gt;Thank you and hope this information was useful :)&lt;/p&gt;

</description>
    </item>
    <item>
      <title>what is Containerization?</title>
      <dc:creator>syed shaheer</dc:creator>
      <pubDate>Sun, 20 Oct 2024 15:40:11 +0000</pubDate>
      <link>https://dev.to/sdshaheer/what-is-containerization-155e</link>
      <guid>https://dev.to/sdshaheer/what-is-containerization-155e</guid>
      <description>&lt;p&gt;The traditional way a business operates is by running only one application on one server. One reason to run a server with a single application is because the operating system such as Linux doesn't have the capability to run multiple applications securely on a single server. This causes a lot of money wastage to a company because they would have to buy a new server to run other applications and applications couldn't take full advantage of the server's capability.&lt;/p&gt;

&lt;p&gt;To solve this kind of issue, the Virtualization and Containerization concept was introduced. Let's take a look at the concept of virtualization before we move to Containerization.&lt;/p&gt;

&lt;h2&gt;
  
  
  Virtualization
&lt;/h2&gt;

&lt;p&gt;Virtual machines allow multiple applications to run on a single server. For example, let us take a company that had 3 servers to run one application each. Now with the help of virtualization, these 3 applications can run on a single server by creating 3 virtual machines. To build a virtual machine we need following&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;First, we need hardware such as a server.&lt;/li&gt;
&lt;li&gt;second we need software called Hypervisor.&lt;/li&gt;
&lt;li&gt;on top of a hypervisor, we have virtual machines where each virtual machine has its own software like Windows, Linux, Unix, etc.&lt;/li&gt;
&lt;li&gt;On the topmost layer, we have the applications that these Virtual machines are going to run.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;A hypervisor allows one machine to run multiple virtual machines and it controls the sharing of machines hardware. This solves the problem of money wastage but it has its disadvantages like&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;it consumes a lot of disk space because each virtual machine has its own dedicated operating system.&lt;/li&gt;
&lt;li&gt;consumes a lot of RAM and CPU power&lt;/li&gt;
&lt;li&gt;they are slow to start. Because they have separate operating systems they take time to boot up.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;To solve issues of Virtualization the concept of Containerization was introduced&lt;/p&gt;

&lt;h2&gt;
  
  
  Containerization
&lt;/h2&gt;

&lt;p&gt;Containers are similar to virtual machines(VM). the major difference between them is that VM simulates the entire machine whereas container contains only applications. A container is an application that has been packaged with all files, configurations, and dependencies necessary for it to run. The leading software that was used to create, manage, and run containers is docker.&lt;/p&gt;

&lt;p&gt;The major difference between VM and Containers is each VM contains an individual operating system whereas applications in containers share a common operating system(OS). let's say the development team has built a project and given it to the testing team to test it. sometimes the testing team will not to able to run the project on their machines because dependencies and libraries that are installed on their system are different from what the development team has installed in their personal system. With Docker, we can create images and make containers easily. These images will give the correct dependencies and versions. To build a container we need the following setup.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;first, we need hardware such as a server.&lt;/li&gt;
&lt;li&gt;on top of the server, we had an operating system such as Linux.&lt;/li&gt;
&lt;li&gt;on the above OS layer, we have a container engine. The container engine was used to unpack the container files and handle them off to the operating system.&lt;/li&gt;
&lt;li&gt;finally, we have applications that we want to run.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Advantages&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;They are smaller in size.&lt;/li&gt;
&lt;li&gt;they are lightweight.&lt;/li&gt;
&lt;li&gt;take less bootup time.&lt;/li&gt;
&lt;li&gt;consume less RAM and CPU power&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Disadvantages&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;containers must packaged to work with the same operating system of the server(for example if the server operating system is Linux then files in the container should be Linux-based).&lt;/li&gt;
&lt;li&gt;Since there is one common operating system, if the OS crashes then the containers will go down&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Hope this information was useful. Thank you :)&lt;/p&gt;

</description>
    </item>
  </channel>
</rss>
