<?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: Abdullah</title>
    <description>The latest articles on DEV Community by Abdullah (@abkaaar).</description>
    <link>https://dev.to/abkaaar</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%2F864945%2Fe3c032e2-1171-4bfa-b040-c43eff9baf30.jpeg</url>
      <title>DEV Community: Abdullah</title>
      <link>https://dev.to/abkaaar</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/abkaaar"/>
    <language>en</language>
    <item>
      <title>HTTP Status code a software developer should know.</title>
      <dc:creator>Abdullah</dc:creator>
      <pubDate>Wed, 09 Oct 2024 15:36:17 +0000</pubDate>
      <link>https://dev.to/abkaaar/http-status-code-a-software-developer-should-know-1gd9</link>
      <guid>https://dev.to/abkaaar/http-status-code-a-software-developer-should-know-1gd9</guid>
      <description>&lt;p&gt;HTTP status codes are three-digit numbers that servers send back to clients (like web browsers) to indicate the result of a request. They are part of the HTTP protocol and help communicate whether a request was successful, if there was an error, or if further action is needed.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;why are they important?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;HTTP status codes are important because they communicate the outcome of a client’s request to the server in a standardized way. These codes inform both the client (e.g., a web browser, API client, or mobile app) and the server about the result of the request and help in troubleshooting or taking further actions.&lt;/p&gt;

&lt;p&gt;Additional reasons they are important are for Automation, SEO, security, user experience etc.&lt;/p&gt;

&lt;p&gt;Below are some the HTTP codes, when to use them, where to apply them and some examples of how you can implement them.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
1xx: Informational Responses
These codes indicate that the server has received the request and the client should continue to send the request or that the server is processing the request.&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;
100 Continue
Meaning: The server has received the initial part of the request and the client should continue with the rest of the request.
When it happens: Typically used during large uploads to ensure the server is ready.
&lt;code&gt;HTTP/1.1 100 Continue
&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;2.2xx: Successful Responses&lt;br&gt;
These indicate that the client's request was received and processed successfully.&lt;/p&gt;

&lt;p&gt;200 OK&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Meaning: The request was successful.&lt;/li&gt;
&lt;li&gt;When it happens: For successful GET, POST, PUT, DELETE requests.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;code&gt;res.status(200).json({ message: "Request was successful" });&lt;br&gt;
&lt;/code&gt;&lt;br&gt;
201 Created&lt;br&gt;
Meaning: The request was successful and a new resource was created.&lt;br&gt;
When it happens: When a new record or resource (like a user or object) is successfully created.&lt;br&gt;
&lt;code&gt;res.status(201).json({ message: "User created successfully", user: newUser });&lt;br&gt;
&lt;/code&gt;&lt;br&gt;
204 No Content&lt;br&gt;
Meaning: The request was successful, but there's no content to send back.&lt;br&gt;
When it happens: Often used after a DELETE request when there's no additional information to send.&lt;br&gt;
&lt;code&gt;res.status(204).send(); // No content&lt;br&gt;
&lt;/code&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;3xx: Redirection Responses
These codes indicate that the client must take some additional action to complete the request.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;301 Moved Permanently&lt;br&gt;
Meaning: The resource has been permanently moved to a new URL.&lt;br&gt;
When it happens: For URL redirections, often for old resources moved to new locations.&lt;br&gt;
&lt;code&gt;HTTP/1.1 301 Moved Permanently&lt;br&gt;
Location: https://new-url.com&lt;br&gt;
&lt;/code&gt;&lt;br&gt;
302 Found (Temporary Redirect)&lt;br&gt;
Meaning: The resource has been temporarily moved to a different URL.&lt;br&gt;
When it happens: Common for temporary URL redirections.&lt;br&gt;
&lt;code&gt;res.redirect(302, 'https://temporary-url.com');&lt;br&gt;
&lt;/code&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;4xx: Client Errors
These indicate that something is wrong with the request.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;400 Bad Request&lt;br&gt;
Meaning: The server could not understand the request due to invalid syntax or bad data.&lt;br&gt;
When it happens: When the client sends malformed request data.&lt;br&gt;
&lt;code&gt;res.status(400).json({ error: "Invalid data format" });&lt;br&gt;
&lt;/code&gt;&lt;br&gt;
401 Unauthorized&lt;br&gt;
Meaning: Authentication is required or has failed.&lt;br&gt;
When it happens: When the user tries to access a protected resource without proper credentials.&lt;br&gt;
&lt;code&gt;res.status(401).json({ error: "Unauthorized access" });&lt;br&gt;
&lt;/code&gt;&lt;br&gt;
403 Forbidden&lt;br&gt;
Meaning: The client is authenticated, but does not have permission to access the resource.&lt;br&gt;
When it happens: When a user is logged in but doesn't have the right permissions to perform an action.&lt;br&gt;
&lt;code&gt;res.status(403).json({ error: "Access denied" });&lt;br&gt;
&lt;/code&gt;&lt;br&gt;
404 Not Found&lt;br&gt;
Meaning: The server cannot find the requested resource.&lt;br&gt;
When it happens: When the user requests a resource that doesn’t exist.&lt;br&gt;
&lt;code&gt;res.status(404).json({ error: "Resource not found" });&lt;br&gt;
&lt;/code&gt;&lt;br&gt;
405 Method Not Allowed&lt;br&gt;
Meaning: The request method is not supported for the requested resource.&lt;br&gt;
When it happens: When the user tries to use a method (like POST) on a resource that only allows other methods (like GET).&lt;br&gt;
&lt;code&gt;res.status(405).json({ error: "Method not allowed" });&lt;br&gt;
&lt;/code&gt;&lt;br&gt;
409 Conflict&lt;br&gt;
Meaning: The request conflicts with the current state of the server.&lt;br&gt;
When it happens: Often used for version conflicts, duplicate entries, or when data already exists.&lt;br&gt;
&lt;code&gt;res.status(409).json({ error: "Resource already exists" });&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;429 Too Many Requests&lt;br&gt;
Meaning: The client has sent too many requests in a given amount of time ("rate limiting").&lt;br&gt;
When it happens: When an API restricts the number of requests a client can make in a given period.&lt;br&gt;
&lt;code&gt;res.status(429).json({ error: "Too many requests, please try again later" });&lt;/code&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;5xx: Server Errors
These indicate that the server has encountered a problem while processing the request.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;500 Internal Server Error&lt;br&gt;
Meaning: The server encountered a general error that prevented it from fulfilling the request.&lt;br&gt;
When it happens: When something goes wrong on the server side.&lt;br&gt;
&lt;code&gt;res.status(500).json({ error: "Internal Server Error" });&lt;br&gt;
&lt;/code&gt;&lt;br&gt;
502 Bad Gateway&lt;br&gt;
Meaning: The server received an invalid response from an upstream server.&lt;br&gt;
When it happens: Common when your app is acting as a gateway or proxy and the upstream server fails.&lt;br&gt;
&lt;code&gt;res.status(502).json({ error: "Bad Gateway" });&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;503 Service Unavailable&lt;br&gt;
Meaning: The server is currently unavailable (overloaded or down for maintenance).&lt;br&gt;
When it happens: When the server is down temporarily or too busy to handle the request.&lt;br&gt;
&lt;code&gt;res.status(503).json({ error: "Service Unavailable" });&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;504 Gateway Timeout&lt;br&gt;
Meaning: The server was acting as a gateway or proxy and did not receive a timely response from the upstream server.&lt;br&gt;
When it happens: When a request to another server times out.&lt;br&gt;
&lt;code&gt;res.status(504).json({ error: "Gateway Timeout" });&lt;br&gt;
&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Conclusion&lt;br&gt;
Understanding and handling HTTP status codes properly ensures better user experience and clear communication between the frontend and backend.&lt;br&gt;
Also to make understand that generally:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;200-299 = success&lt;/li&gt;
&lt;li&gt;300-399 = it's somewhere else&lt;/li&gt;
&lt;li&gt;400-499 = the client/user screwed up&lt;/li&gt;
&lt;li&gt;500-599 = the server screwed up&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Example:&lt;/strong&gt;&lt;br&gt;
&lt;code&gt;app.post('/user', async (req, res) =&amp;gt; {&lt;br&gt;
  try {&lt;br&gt;
    const user = await User.create(req.body);&lt;br&gt;
    res.status(201).json({ message: "User created successfully", user });&lt;br&gt;
  } catch (error) {&lt;br&gt;
    if (error.code === 11000) { // Duplicate key error&lt;br&gt;
      res.status(409).json({ error: "User already exists" });&lt;br&gt;
    } else {&lt;br&gt;
      res.status(500).json({ error: "Internal Server Error" });&lt;br&gt;
    }&lt;br&gt;
  }&lt;br&gt;
});&lt;/code&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>http</category>
      <category>statuscodes</category>
      <category>softwareengineering</category>
    </item>
    <item>
      <title>Front-end skills: Lazy loading and code splitting technique.</title>
      <dc:creator>Abdullah</dc:creator>
      <pubDate>Mon, 07 Oct 2024 10:26:16 +0000</pubDate>
      <link>https://dev.to/abkaaar/front-end-skills-lazy-loading-and-code-splitting-technique-4ljf</link>
      <guid>https://dev.to/abkaaar/front-end-skills-lazy-loading-and-code-splitting-technique-4ljf</guid>
      <description>&lt;p&gt;&lt;strong&gt;Lazy loading&lt;/strong&gt; and &lt;strong&gt;code splitting&lt;/strong&gt; are optimization techniques used in web development to improve performance, especially for large applications and it is required when applying for front-end developer roles.&lt;/p&gt;

&lt;h3&gt;
  
  
  1. &lt;strong&gt;Lazy Loading&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Lazy loading is a strategy to defer loading resources (like images, scripts, or components) until they are actually needed. This helps reduce the initial load time of the webpage, as only essential resources are loaded up front. For example, a web page may load just the content the user sees initially, and then load more content as the user scrolls down or navigates to other parts of the app.&lt;/p&gt;

&lt;p&gt;In React, lazy loading can be implemented using &lt;code&gt;React.lazy()&lt;/code&gt; and &lt;code&gt;Suspense&lt;/code&gt; for loading components only when they are needed:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;LazyComponent&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;lazy&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="k"&gt;import&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./LazyComponent&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;App&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;Suspense&lt;/span&gt; &lt;span class="na"&gt;fallback&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;Loading...&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;LazyComponent&lt;/span&gt; &lt;span class="p"&gt;/&amp;gt;&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nc"&gt;Suspense&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  2. &lt;strong&gt;Code Splitting&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Code splitting is the process of breaking up your application’s code into smaller bundles, so that only the necessary code is loaded initially. This complements lazy loading by ensuring that only the code for the current view or feature is loaded, rather than loading the entire application at once.&lt;/p&gt;

&lt;p&gt;Tools like &lt;strong&gt;Webpack&lt;/strong&gt; or &lt;strong&gt;Vite&lt;/strong&gt; provide automatic code splitting. In React, it’s typically done with dynamic &lt;code&gt;import()&lt;/code&gt; statements, which enables splitting out parts of your app (like individual components or routes) into separate chunks.&lt;/p&gt;

&lt;p&gt;For example, you might load specific routes as separate bundles like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;LazyComponent&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;lazy&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="k"&gt;import&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./LazyComponent&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;

&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;Route&lt;/span&gt; &lt;span class="na"&gt;path&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"/lazy"&lt;/span&gt; &lt;span class="na"&gt;component&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;LazyComponent&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt; &lt;span class="p"&gt;/&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Together, lazy loading and code splitting can significantly enhance the performance of large apps, making them faster and more efficient.&lt;/p&gt;

</description>
      <category>frontend</category>
      <category>react</category>
    </item>
  </channel>
</rss>
