DEV Community: Md. Fardin Khan

🚀 Explore My New Interactive Portfolio and GitHub Projects! 🌟

Md. Fardin Khan — Thu, 20 Jun 2024 15:25:38 +0000

Hi everyone,

I'm excited to share the new version of my portfolio with you! I've been working hard to improve it using Kaboom.js and Tiled software. Here’s what you can find in my new portfolio:

Interactive Projects: Created with Kaboom.js.
Detailed Maps: Maps designed with Tiled software.
Skill Showcase: My technical and soft skills.

You can view my new portfolio here.

If you’re curious, you can also check out the older version of my portfolio here.

I also have many projects on GitHub that you might find interesting. Feel free to explore them here.

I’d love to hear your thoughts. Reach out if you have any questions or want to connect.

Thanks for checking out my work!

Happy coding! 🚀

Client Device Detection in Next Js

Md. Fardin Khan — Mon, 08 Apr 2024 10:52:03 +0000

Ensuring optimal user experience across various devices is paramount in the ever-evolving web development landscape. Whether it's a smartphone, tablet, laptop, or desktop computer, each device has its own screen size, resolution, and capabilities. As web developers, one of our primary goals is to deliver content that renders seamlessly across this diverse array of devices. This is where device detection comes into play.

Device detection involves identifying the type of device accessing a website, allowing developers to tailor the content and layout accordingly. By understanding the device's characteristics, such as screen size and browser capabilities, developers can optimize the presentation of their website for a superior user experience.

In my recent endeavors to enhance website rendering within my Next.js projects, I delved into the realm of device detection. Despite numerous attempts using conventional methods, I found myself unable to achieve the desired results. After hours of research on Google and YouTube, I stumbled upon a game-changing solution: the Next.js Header API.

Utilizing the Next.js Header API for device detection involved a series of strategic implementations. By examining user-agent strings and other relevant data, I could accurately discern the type of device accessing the website. Armed with this information, I could then tailor the website rendering to suit the specific device, whether it be a mobile phone, tablet, or desktop computer.

Here's a simplified example of how this can be achieved:

src/app/page.tsx

import { headers } from "next/headers";
import { isMobile } from "../utils/isMobile";

export default async function Home() {
  const userAgent = headers().get("user-agent") || "";
  const mobileCheck = isMobile(userAgent);

  return mobileCheck? (
      <div>Mobile Page</div>
  ) : (
    <div>Desktop page</div>
  );
}

/utils/isMobile

// utils/isMobile.ts
export const isMobile = (userAgent: string): boolean => {
  return /android.+mobile|ip(hone|[oa]d)/i.test(userAgent);
};

By incorporating the Next.js Header API and implementing device detection in this manner, I was able to overcome the challenges I faced and successfully optimize website rendering for different devices. This approach not only improves user experience but also demonstrates the power and versatility of Next.js in modern web development.

Whether you're building a personal blog, an e-commerce platform, or a corporate website, considering device detection using Next.js Header API can significantly enhance your project's accessibility and appeal. Embrace this innovative solution and embark on a journey towards delivering exceptional user experiences across all devices.

Unveiling the Effects of Icons on Website Performance (part two)

Md. Fardin Khan — Fri, 06 Oct 2023 13:24:36 +0000

Hello and welcome back to the next part of our session. In the previous session, we delved into the impact of React Icons on web performance, and if you missed it, you can catch up by visiting Part One. Now, it's time to roll up our sleeves and explore some effective approaches to reduce page load times and enhance overall web performance.

When it comes to web development, speed matters—a lot. It's not just about delivering content; it's about delivering it swiftly and efficiently. Slow-loading pages can be a major turn-off for users and can negatively affect your website's search engine rankings.

So, without further ado, let's dive into the strategies and techniques I've discovered to optimize web performance and provide users with a smoother, faster experience.

Before we proceed, please note that the approaches I'm about to share are based on my findings and experiences. I'm not endorsing any specific tool or method, and I'm open to learning from others. If you have a better solution or insight to offer, I encourage you to leave a comment or reach out to me via email. I'm eager to explore all available solutions and continue our collective journey toward improved web performance.

Let's get started! 🚀

At the outset, I opted for ANT DESIGN ICONS when it came to using icons in my web development projects. Why, might you ask? Well, it's incredibly convenient and lightweight. Unlike some icon libraries that require you to install the entire component library, Ant Design Icons offers a more streamlined approach.

With Ant Design Icons, you don't need to bloat your project with unnecessary components. Instead, you can selectively use just the icons you need. The installation process is a breeze. Just run the following command:

npm install @ant-design/icons --save

This minimalistic approach not only keeps your project lean but also helps optimize performance. After all, every byte matters when it comes to web performance.

Certainly, it's important to note that it's not just the choice of icon library that matters for web performance, but also how you integrate and use those icons in your code.

Efficient usage of icons can make a significant difference in loading times and resource utilization. It's not uncommon to see web developers inadvertently introduce performance bottlenecks by misusing or overloading their web pages with unnecessary icons.

1. Using Ant Design Icons in the Navbar:

In my first approach, I made the strategic decision to integrate Ant Design Icons into the navigation bar of my website. Given that the navbar is a consistent element across all pages, this choice seemed natural and efficient.

Icons in the navbar serve a dual purpose—they enhance both functionality and aesthetics. They offer users visual cues, which make navigation more intuitive and engaging. However, it's crucial to strike a balance and avoid overwhelming the navbar with icons that don't serve a genuine purpose.

To achieve this, I followed a specific approach:

*Import Icons in a Separate File:*

I created a separate file for importing icons. This file
houses all the icons I intended to use throughout the
website. Importing them in one place ensures that they are
fetched and included only once during the build process
Here's a glimpse of the code:

*Reusable Icons:*

By centralizing the icons in a single file, I made it possible to reuse these icons across multiple pages without the need to request them from Ant Design's server repeatedly. This approach significantly reduces page load times and optimizes the overall web performance.

As you can see, this method ensures that icons are imported only once during the build process, sparing us from unnecessary server requests and benefiting the overall page load time.

2. Use of SVG ICONS:

Many developers, including myself, have held the belief that using SVGs can negatively impact our web page's performance. However, over time, I've come to realize that it's not SVG themselves but rather how we use them that matters.

In my code, I adopted an approach where I treated SVGs as images in Next.js. This strategy allowed me to efficiently deploy SVGs as part of my web project.

Here's how I implemented it:

*Import SVGs as Images URL:*
I imported SVGs just like any other image file, as shown
below:

*Use SVGs Where Needed:*

Once imported, I could use these SVGs as images in my
components or pages, as demonstrated in the following code
snippet:

This approach made it simple to incorporate SVG wherever I
needed them in my web application.

*Optimize SVG When Required:*

While using SVGs as images, I also ensured that the SVGs
themselves were optimized for web use. This involved
optimizing their file sizes and ensuring that they didn't
contain unnecessary elements or attributes. This
optimization step is crucial for maintaining a fast-loading
website.

In closing, I want to reiterate that these findings are a result of my exploration and experiences. Web development is a dynamic field, and there's always more to learn. There may be alternative approaches, new tools, or optimizations that I haven't encountered yet. If you come across any errors or have better solutions, please don't hesitate to share them.

The beauty of our developer community lies in our collective knowledge and our willingness to help one another grow. Let's continue to push the boundaries of web performance, learn from each other, and create even faster and more efficient websites.

Thank you for being a part of this journey, and let's keep the spirit of curiosity and collaboration alive in our pursuit of better web performance.

Happy coding, and may your websites always load swiftly! 🚀🚀

Unveiling the Effects of Icons on Website Performance

Md. Fardin Khan — Tue, 03 Oct 2023 03:22:10 +0000

Hello, fellow developers!

Welcome to my debut blog post. If you spot any errors, kindly point them out—I'm here to learn and grow. Today, I'm excited to delve into a recent challenge I encountered while grappling with website performance.

First and foremost, let me clarify that I'm not here to cast blame or impose my views on anyone. I've embarked on this writing journey to share my experience, particularly a significant hiccup I faced while crafting my portfolio website. Allow me to introduce you to my homepage—

As you can observe, the homepage consists of a few text elements and a navigation bar adorned with icons. To achieve this, I employed Material-UI (MUI) and React Icons. However, there's a noticeable hiccup - the page, ideally, should load swiftly, but instead, it's a bit sluggish. Even more concerning, it's transferring more data than anticipated.

Let's dive deeper into these issues. After Some time I found there are many unused javascript which is coming from React icons. please see this--

So, as you can see, the network tab indicates an abundance of unused JavaScript that's being pulled in from React Icons. This is quite perplexing, especially when I've used only one icon on my homepage. It seems that the icons file is loading every icon in its arsenal, regardless of whether it's needed or not. Here is how I imported the icons--

Initially, I thought I had found a solution by dynamically importing the icons as needed. However, upon inspecting the React Icons file within the node modules, it became apparent where the issue lies. Take a look at this snippet:

In this image, you can observe that all the "Gi" type icons are bundled together in one file. So, even if I use only one or a few icons from the "Gi" file, React Icons generates and loads the entire file, which includes all the icons it offers.

This behavior undoubtedly contributes to the slower loading times and excessive data transfer that I observed.

Now, let's take a look at the homepage I created without relying on React Icons:

As you can see, the difference is striking. The page now loads significantly faster, and the data transfer is notably reduced compared to the previous setup.

In my quest to enhance website performance, I decided to explore an alternative approach for displaying icons on my portfolio. By refraining from using React Icons and opting for a different method, I was able to achieve these promising results.

Stay tuned for the exciting details!
Unveiling the Effects of Icons on Website Performance (Part two)