Forem: Shamim Bin Nur

Escaping the Uncanny Valley: Understanding CSR, SSR, Hydration, and Modern Web Rendering

Shamim Bin Nur — Sat, 08 Feb 2025 16:30:18 +0000

Client-Side Rendering

Client-side rendering refers to generating the content on the client’s browser. Clients receive a minimal, empty HTML without any content inside. Afterward, they receive separate JavaScript files that fuel the entire website to generate the content. On the first render, users may experience a loading state on an unmeaningful page. With client-side rendering, users rely mostly on their browsers, making it impractical to ensure good performance on low-end devices. Since the client receives an empty HTML file without any content on the first request, web crawlers struggle to interpret the page’s content and index it properly for optimized search results.

Server-Side Rendering

Server-side rendering refers to generating content and HTML elements on the server side and passing them to the client side. Clients get an immediate experience of meaningful content without any loading period. Since users don’t have to rely heavily on their browsers, they experience smooth performance even on low-spec devices. Server-side rendering not only enhances user experience but also boosts SEO optimizations. It simplifies the process for crawlers to scan the content and index it for optimized search results.

Client-Side Rendering (CSR) vs Server-Side Rendering (SSR)

Client-Side Rendering (CSR)	Server-Side Rendering (SSR)
Receives empty HTML without content on the first request	Receives meaningful content on the first request
Content is generated on the client’s browser	Content is generated on the server
Users experience a loading state	Users don’t experience a loading state
Bad for SEO, as web crawlers receive blank HTML initially	Good for SEO, as crawlers receive meaningful content initially
Performance can drop on low-end devices	Optimal performance on both high-end and low-end devices

Hydration on Server-Side Rendering (SSR)

In server-side rendering, hydration refers to a process quite different from its meaning in real-world scenarios. Typically, hydration means adding water to something. However, in server-side rendering, it means attaching JavaScript to the HTML that the server passes to the client side.

On the first request, the server sends an HTML file with meaningful content. To make the page interactive, it requires JavaScript. After a while, the server sends the necessary JavaScript files to the client. The client uses these files to bind all required event handlers to the DOM elements (HTML elements), making them interactive.

Uncanny Valley

Partial hydration is a technique to avoid the uncanny valley situation and accelerate initial interactivity. Instead of loading the entire JavaScript at once, only the essential JavaScript for specific portions of the page is loaded first, based on priority. This reduces the JavaScript loading time. For example, in a blog post where the comment section needs to be interactive first, the necessary JavaScript file for the comment section loads first, while the rest loads later, based on priority. Popular web frameworks like Next.js and Astro leverage partial hydration to boost website performance.

Conclusion

Choosing between client-side rendering (CSR) and server-side rendering (SSR) depends on your application's needs. Server-side rendering (SSR) ensures faster load times, better SEO, and smoother performance on low-end devices, while client-side rendering (CSR) offers flexibility for dynamic interactions. Hydration on the server side makes pages interactive by attaching JavaScript, and partial hydration further boosts performance by loading only essential scripts first. Frameworks like Next.js and Astro simplify these processes for developers.

Understanding Semantic HTML: The Backbone of Meaningful Web Development

Shamim Bin Nur — Sat, 26 Oct 2024 15:25:23 +0000

In web development, the term "semantic" refers to how code communicates its meaning effectively. Semantic HTML is a practice that goes beyond mere aesthetics, allowing developers, browsers, and search engines to understand the structure and content of a webpage. By using semantic HTML, we can enhance accessibility and improve search engine optimization (SEO), making it an essential practice for any web developer.

The Importance of Semantic HTML Semantic HTML is crucial for a variety of reasons:

1. Improved SEO: Search engines rely on semantic markup to interpret the content and hierarchy of a webpage. This understanding is vital for ranking pages in search results.

2. Accessibility: Semantic elements provide context to assistive technologies, such as screen readers, allowing users with disabilities to navigate web content more effectively.

3. Maintainability: Clear and meaningful code is easier for developers to read and maintain over time.

4. Future-Proofing: As web standards evolve, using semantic HTML ensures that your content remains relevant and accessible across different platforms and technologies. Key Semantic HTML Elements to Know

Here are some essential semantic HTML elements that every web developer should incorporate:

1. Header: The Website's Introduction

The header tag defines the introductory content of a webpage. It often includes the website's logo, navigation links, and essential branding information. Using helps separate introductory elements from the main content.

Example:

<header>
    <div class="brand">
        <h1>My Awesome Blog</h1>
        <img src="logo.png" alt="My Awesome Blog Logo">
    </div>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</header>

2. Nav: Navigation Links

The nav tag indicates a section containing navigation links. It’s essential for SEO and usability, allowing search engines to discover other pages on your site while assisting users in navigating your content.

Example:

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Portfolio</a></li>
    </ul>
</nav>

3. Main: Primary Content Area

The main tag wraps the main content of a webpage, helping search engines and users understand the primary focus of the page.
Example:

<main>
    <h2>Welcome to My Blog</h2>
    <p>This blog shares insights on web development, technology trends, and best practices.</p>
</main>

4. Section: Thematic Grouping of Content

The section tag is used to group related content together, improving both organization and readability.

Example:

<section>
    <h3>Latest Articles</h3>
    <p>Check out our latest posts on web development and design.</p>
</section>

5. Article: Independent Content

The article tag defines independent content that could stand alone, such as blog posts or news articles.

Example:

<article>
    <h2>5 Essential Tips for Semantic HTML</h2>
    <p>Understanding and implementing semantic HTML is vital for SEO and accessibility.</p>
</article>

6. Aside: Related Content

The aside tag is used for content that is tangentially related to the main content, such as sidebars, call-outs, or additional information.

Example:

<aside>
    <h4>Did You Know?</h4>
    <p>Using semantic HTML can boost your site's search engine rankings.</p>
</aside>

7. Footer: Closing Section

The footer tag represents the bottom section of a webpage, often containing copyright information, links to other pages, and contact details.

Example:

<footer>
    <p>&copy; 2024 My Awesome Blog. All rights reserved.</p>
</footer>

Additional Semantic Elements

1. Figure and Figcaption: Used for representing visual content and its caption.

Example:

<figure>
    <img src="image.jpg" alt="Image description">
    <figcaption>A beautiful sunset.</figcaption>
</figure>

2. **Details and Summary: For creating collapsible content sections.

Example:

<details>
    <summary>More information</summary>
    <p>Here’s additional information about the topic.</p>
</details>

3. Mark: To highlight important text.

Example:

<p>Shamim is proficient in <mark>Web Design</mark> and <mark>Web Development</mark>.</p>

4. Time: To represent dates, times, or durations.

Example:

<p>The shop is open from <time>09:00</time> to <time>18:00</time> every weekday.
</p>

Common Mistakes to Avoid

1. Overusing div and span tags: While these tags are essential, relying on them for layout instead of using semantic tags can lead to poor SEO and accessibility.

2. Neglecting Accessibility: Always include relevant attributes (like alt text for images) and ensure that the semantic elements you use are navigable by assistive technologies.

3. Inconsistent Use: Be consistent in your use of semantic elements across your website. This helps maintain clarity and improves your site's overall structure.
Best Practices for Implementing Semantic HTML

4. Plan Your Structure: Before coding, outline the structure of your content to determine which semantic elements are most appropriate.
5. Use Descriptive Element Names: Opt for meaningful names that reflect the content they contain, making it easier for both users and search engines to understand.

6. Test with Accessibility Tools: Use tools like WAVE or Lighthouse to check for accessibility issues and ensure your semantic HTML is helping, not hindering user experience.

Conclusion

Incorporating semantic HTML into your web development projects is essential for creating user-friendly, accessible, and SEO-optimized websites. By using meaningful elements, you enhance both the experience for your users and the visibility of your content in search engines. Remember, semantic HTML is not just a trend; it's a foundational practice that can significantly impact your web projects.

Build your own Promise-Based HTTP Client like axios/fetch : Ohey

Shamim Bin Nur — Tue, 11 Jun 2024 19:41:57 +0000

Introduction

Today, I'm excited to share the journey of creating my very own npm package: Ohey. Ohey is a promise-based HTTP client built on top of XMLHttpRequest. Whether you're new to web development or an experienced coder, understanding how Ohey works will give you insights into building and using HTTP clients in JavaScript. Let's dive into the details of how I built this package!

Why Ohey?

With numerous HTTP clients like Axios and Fetch, you might wonder why I decided to create Ohey. The primary motivation was to learn more about HTTP requests and promises by building something from scratch.

Setting Up the Project

First, I set up a new npm project. You might already know npm, it’s a package manager for JavaScript that allows you to manage your project's dependencies. Here’s how you can set up a new npm project

Open your terminal and create a new directory for your project:
```
mkdir ohey
cd ohey
```
Initialize a new npm project:
```
npm init -y
```

This creates a package.json file, which holds the metadata for your project.

Writing the Ohey Function

The core functionality of Ohey lies in the single ohey function. This function takes an endpoint and an options object and returns a promise that resolves or rejects based on the outcome of the HTTP request. Here’s the complete code for Ohey:

function ohey (
  endpoint,
  {
    method = "GET",
    baseUrl = "",
    timeout = 0,
    body,
    headers = { "Content-Type": "application/json" }
  } = {}
) {

    // Concatenate the baseURL and endpoint
  const url = `${baseUrl}${endpoint}`;

    // Define a promise and return it.
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();

    if (timeout > 0) {
      setTimeout(() => {
        xhr.abort();
        reject(new Error("Request timed out"));
      }, timeout);
    }
        // Initialize an HTTP request
    xhr.open(method, url, true);

        // Etarate through header, extract keys and value.
    for (const [key, value] of Object.entries(headers)) {
      xhr.setRequestHeader(key, value);
    }

    xhr.onload = () => {
      if (xhr.status >= 200 && xhr.status < 300) {
        let responseType = "Text";

        try {
          responseType = "JSON";
          resolve({ data: JSON.parse(xhr.responseText), responseType, responseCode: xhr.status, method });
        } catch (error) {
          resolve({ data: xhr.responseText, responseType, responseCode: xhr.status, method });
        }
      } else {
        reject(new Error(`Request failed with status: ${xhr.status}`));
      }
    };

    xhr.onerror = () => {
      reject(new Error("Network error"));
    };

        // Send the request with the body parameter
    xhr.send(body);
  });
};

// Export the function as a module
module.exports = ohey;

Breaking Down the Code

Let's dive deeper into each part of the ohey function to understand how it works.

Function Declaration and Default Parameters

The ohey function is declared with two main parameters: endpoint and an options object with several default values.

function ohey (
  endpoint,
  {
    method = "GET",
    baseUrl = "",
    timeout = 0,
    body,
    headers = { "Content-Type": "application/json" }
  } = {}
) {

endpoint: The specific API endpoint you want to hit (e.g., "/users").
method: The HTTP method to use (default is "GET").
baseUrl: The base URL for the request (e.g., "https://api.example.com").
timeout: The request timeout duration in milliseconds (default is 0, meaning no timeout).
body: The request payload, used primarily for POST, PUT, and PATCH requests.
headers: An object representing the request headers (default includes "Content-Type: application/json").

Constructing the URL

The full URL for the request is constructed by concatenating the baseUrl and the endpoint.

const url = `${baseUrl}${endpoint}`;

Returning a Promise

The ohey function returns a Promise, which allows asynchronous operations to be handled more gracefully.

return new Promise((resolve, reject) => {

Creating the XMLHttpRequest Object

An instance of XMLHttpRequest is created to handle the HTTP request.

const xhr = new XMLHttpRequest();

Handling Timeout

If a timeout value is specified, a timer is set to abort the request if it exceeds the given duration.

if (timeout > 0) {
  setTimeout(() => {
    xhr.abort();
    reject(new Error("Request timed out"));
  }, timeout);
}

xhr.abort(): Cancels the request.
reject: The promise is rejected with a "Request timed out" error.

Configuring the XMLHttpRequest

The HTTP method and URL are set using xhr.open. The true parameter indicates that the request is asynchronous.

xhr.open(method, url, true);

Setting Request Headers

Custom headers are added to the request using a for...of loop to iterate over the headers object, extract the keys and values, and set them on the request header.

for (const [key, value] of Object.entries(headers)) {
  xhr.setRequestHeader(key, value);
}

Handling the Response

The onload event is triggered when the request completes successfully. It checks the HTTP status code to determine if the request was successful. Any response code 200 to 299 typically means the request has hit the server successfully.

xhr.onload = () => {
  if (xhr.status >= 200 && xhr.status < 300) {
    let responseType = "Text";

    try {
      responseType = "JSON";
      resolve({ data: JSON.parse(xhr.responseText), responseType, responseCode: xhr.status, method });
    } catch (error) {
      resolve({ data: xhr.responseText, responseType, responseCode: xhr.status, method });
    }
  } else {
    reject(new Error(`Request failed with status: ${xhr.status}`));
  }
};

xhr.status: The HTTP status code of the response.
resolve: If the request is successful, the promise is resolved with the response data.
- responseType: Indicates whether the response is JSON or plain text.
- responseCode: The HTTP status code.
- method: The HTTP method used for the request.
JSON.parse: Attempts to parse the response as JSON. If parsing fails, the response is returned as plain text.

Handling Network Errors

The onerror event is triggered if there is a network error. The promise is rejected with a "Network error" message.

xhr.onerror = () => {
  reject(new Error("Network error"));
};

Sending the Request

Finally, the request is sent using xhr.send, with the body parameter included for methods like POST.

xhr.send(body);
  });
}

Exporting the Function

The ohey function is exported so it can be used in other modules.

module.exports = ohey;

Publishing the Package

To share Ohey with the world, I published it to the npm registry. Here's how you can publish your own package by following these two steps.:

Login to npm:
```
npm login
```
Publish the Package:
```
npm publish
```

Note: Make sure there’s no other package available with the same name on the NPM registry.

And that’s it! Your package is now available on npm for others to install and use.

Conclusion

Understanding the code behind Ohey may give you a basic foundation for working with HTTP requests in JavaScript. By building this package, I aimed to create a simple yet functional HTTP client that leverages the flexibility of promises. I hope this breakdown helps you appreciate the inner workings of Ohey and inspires you to create your own projects! Happy coding!

Boost Your Developer Productivity with the Pomodoro Technique

Shamim Bin Nur — Sat, 08 Jun 2024 19:12:57 +0000

Hey there, developers! In our fast-paced world, managing time efficiently is crucial for keeping productivity high and avoiding burnout. One awesome method to achieve this is the Pomodoro Technique. This time management strategy breaks work into focused intervals, usually 25 minutes long, separated by short breaks. Developed by Francesco Cirillo in the late 1980s, this technique is perfect for developers who need to balance deep focus with regular mental breaks. Let's dive into how you can use the Pomodoro Technique to boost your productivity and improve your work-life balance.

Why the Pomodoro Technique Works for Developers

The Pomodoro Technique is a great fit for the cognitive demands of software development. Here’s why it rocks:

1. Enhanced Focus: Working in short, intense bursts helps maintain concentration and reduces the temptation to multitask.

2. Reduced Burnout: Regular breaks prevent mental fatigue, ensuring sustained daily productivity.

3. Better Time Estimation: By tracking the number of pomodoros required for tasks, you can improve your ability to estimate project timelines.

4. Distraction Management: The technique encourages dealing with distractions during breaks, allowing uninterrupted work sessions.

Implementing the Pomodoro Technique

Step-by-Step Guide

1. Select a Task: Pick a specific development task, like writing a feature, fixing a bug, or reviewing code.

2. Set the Timer: Set a timer for 25 minutes. Many developers find physical timers or simple timer apps useful for minimizing distractions. For an online Pomodoro timer, I like https://zoneout.me/pomo because it’s super user-friendly.

3. Work Intensely: Focus solely on the task at hand. Avoid checking emails, messages, or any other interruptions. If you’re using ZoneOut and have a secondary screen, make the timer full-screen to stay aware of time without other distractions.

4. Take a Short Break: When the timer rings, take a 5-minute break. Step away from your computer, stretch, or grab a coffee.

5. Repeat: After the short break, start another Pomodoro. After completing four Pomodoros, take a longer break of 15-30 minutes to recharge.

Tips for Developers

Group Smaller Tasks: Combine smaller tasks, like responding to emails or writing documentation, into a single Pomodoro session to maintain flow.

1. Plan Pomodoros in Advance: At the start of your day, outline the tasks you aim to complete and allocate Pomodoros accordingly. This helps prioritize and manage time effectively.

2. Use Tools: Utilize Pomodoro-specific apps like ZoneOut or Focus Booster that integrate with task management tools like Jira or Trello, providing seamless tracking and reporting.

3. Customize Intervals: While 25 minutes is the traditional length, adjust the duration based on your task and concentration levels. Some developers prefer longer intervals for deep work sessions.

4. Physical Activity During Breaks: Engage in physical activities like walking, stretching, or quick exercises during breaks to rejuvenate your mind and body.

Overcoming Common Challenges

Interruptions

If an interruption occurs during a Pomodoro, pause the timer, address the interruption, and then resume. Frequent interruptions should be noted and managed during breaks.

Maintaining Consistency

Consistency is key. It may be challenging at first, but with practice, the technique can become a natural part of your workflow. Track your progress and adjust the technique to better suit your working style.

Conclusion

The Pomodoro Technique is a powerful tool for developers, offering a structured approach to managing time and tasks. By breaking work into focused intervals and incorporating regular breaks, you can enhance productivity, maintain high-quality output, and avoid burnout. But don’t think it’s just for developers—this technique works wonders for anyone looking to improve their focus and productivity. Start small, adapt the technique to your needs, and watch as your productivity soars.

For further reading and detailed guides on the Pomodoro Technique, check out these resources:

Implement the Pomodoro Technique today and take the first step towards more focused, efficient, and enjoyable coding sessions. Happy coding!