DEV Community: Muhammad Furqan

Unleashing Iconify: Your Ultimate Solution for Icons

Muhammad Furqan — Mon, 16 Oct 2023 14:40:00 +0000

Icons play a vital role in the web development. They guide us, convey messages, and enhance user experiences on numerous websites and applications. Whether you are an experienced developer or a beginner in web development, having a reliable source of high-quality icons is essential. This is where Iconify comes in, providing an extensive selection of icons that will breathe life into your projects.

Understanding Iconify

Iconify is a comprehensive icon library featuring over 150,000 icons and access to over 115 icon sets. It simplifies the process of integrating icons into web development projects, offering a seamless way to choose, customize, and use icons effectively.

The Iconify Features

Diverse Icon Collection

Iconify showcases an extensive collection of icons that span various categories and styles. Whether you're in need of simplistic and minimalistic icons or intricate and detailed ones, Iconify has got you covered.

Seamless Integration

With Iconify, integrating icons becomes effortless. Developers can effortlessly incorporate icons into their projects through straightforward API calls or by utilizing specific libraries that are compatible with popular frameworks and platforms.

Customization Flexibility

Iconify offers effortless customization options for icons, allowing you to tailor them to suit your project's aesthetic. You have the ability to adjust attributes such as size, color, and more, ensuring that the icons seamlessly blend with your design.

Optimal Performance

The lightweight nature of Iconify icons ensures swift loading times, without compromising page speed or overall performance.

Compatibility Across Frameworks

Iconify seamlessly integrates with a wide range of frameworks, libraries, and platforms. Whether you're utilizing Svelte, Vue.js, Qwik, React, Tailwind, or UnoCSS, the process of integrating icons remains straightforward.

VSCode Extension

Enhance your development workflow with Iconify's VSCode extension, which provides a convenient icon preview directly within the VSCode interface.

Search Utility

Effortlessly locate the icons you require by utilizing Iconify's user-friendly search feature. Simplify your workflow and save the time spent on selecting icons.

Elevate Your Projects with Iconify

Incorporating icons into your web projects has never been easier, thanks to Iconify. With its vast collection and seamless integration, you can effortlessly enhance your project's visual appeal and user experience.

Embrace the power of icons and unlock a world of creative possibilities with Iconify. Streamline your development process and leave a lasting impression on your audience.

These features are just the tip of the iceberg. To explore the complete set of features, you can start by visiting the Iconify documentation site.

Stay updated with the latest tech insights by following me!

Are you in need of a highly skilled freelancer specializing in full-stack development to tackle your development challenges? Get in touch with me on Upwork.

Curious about my current projects? Take a look at my Personal Website and GitHub.

Interested in connecting? Feel free to reach out to me on LinkedIn. You can also find me on Twitter

Nx: Elevate monorepo to the next level

Muhammad Furqan — Tue, 10 Oct 2023 22:49:55 +0000

In my most recent article, I explored the concept of monorepo and suggested pnpm, yarn, and npm as good options for managing them. However, these tools might not be the perfect fit for everyone's needs. That's where Nx comes in. Nx is a powerful tool specifically designed to streamline monorepo management. From reducing development and CI/CD time to promoting scalability and reusability, Nx is a game-changer. In this blog post, we will take a closer look at Nx, highlighting its key features and demonstrating how it can greatly improve your projects.

Understanding Nx: An Overview

Nx is a toolkit that is open-source and has been created to assist developers in constructing monorepos that have the ability to scale. It leverages modern development tools and practices to provide an efficient workflow for large-scale applications. Nx offers capabilities for developing multiple applications, libraries, and APIs within a single monorepo.

Key Features of Nx

1. Monorepo Approach

Nx follows the monorepo architecture, allowing developers to manage multiple projects within a single repository. This approach enhances code sharing, simplifies dependency management, and facilitates efficient collaboration across teams.

2. Code Generation

Nx offers a remarkable feature - its efficient code generation capabilities using plugin. This functionality enables developers to easily create essential elements such as components, services, modules, and more. It ensures adherence to best practices and project-specific guidelines, simplifying and speeding up the development process. As a result, codebases have a consistent and organized architecture right from the beginning. The strength of Nx lies in its automation and optimization of code creation, allowing teams to concentrate on building applications instead of getting caught up in repetitive and time-consuming setup tasks.

3. Dependency Graph

Nx provides a user-friendly and thorough display of the project's dependency graph, showcasing a visual portrayal of the complex links and interconnections among different elements within the codebase. This functionality improves comprehension and examination of the code structure, assisting developers in effectively handling dependencies and optimizing the development procedure.

4. Parallel Task Execution

Nx utilizes parallel task execution to enhance the efficiency of workflows. It cleverly arranges and performs tasks simultaneously, taking into account their interdependencies. This method significantly accelerates the development pace, guaranteeing smooth task management, and ultimately saving considerable time for both developers and the CI/CD process.

5. Never rerun tasks twice

Nx incorporates a smart system that strategically employs caching to prevent unnecessary repetition of tasks. Processes like building and conducting linting checks are never never rerun twice. Nx identifies that there have been no changes in the project's files. As a result, it retrieves files and terminal outputs from its cache. Moreover, it extends caching to remote repositories, facilitating distribution across multiple machines. This methodology leads to substantial time savings for developers and the CI/CD pipeline.

6. Fine-Tuning Task Execution

Nx enables you to specify the circumstances under which the cache for that task should be invalidated and the task should be executed again. For instance, you can instruct the nx to be rebuilt the project only if there are modifications in files with the extensions js, ts, or json. Alternatively, you can define the project to be rebuilt whenever any file changes, except for files with the extensions md, test.ts, or test.js.

How to integrate Nx into current project

Regardless of whether your project is a monorepo or not, you can utilize features 4, 5, and 6. Simply install the nx package from the npm registry and run the following command:

npx nx init

This is precisely what I implemented in my portfolio project. Feel free to check it out here.

Conclusion

Nx emerges as a transformative toolkit for developers navigating the complexities of monorepo management. By significantly reducing development and CI/CD time, promoting scalability, and enhancing reusability, Nx proves to be a vital asset for modern development workflows. Ready to explore the capabilities of Nx? Head over to the Nx documentation and get started on revolutionizing your projects.

Stay updated with the latest tech insights by following me!

Are you in need of a highly skilled freelancer specializing in full-stack development to tackle your development challenges? Get in touch with me on Upwork.

Curious about my current projects? Take a look at my Personal Website and GitHub.

Interested in connecting? Feel free to reach out to me on LinkedIn. You can also find me on Twitter

Monorepos: Making Development Easier and Smoother

Muhammad Furqan — Fri, 06 Oct 2023 11:41:28 +0000

Efficient management of codebases is key to success in the realm of software development. Code is at the heart of every application and system, driving the technology that shapes our digital world. Monorepos, short for monolithic repositories, have emerged as a robust solution for handling codebases of varying sizes and complexities. In this blog post, we will explore what monorepos are, their advantages, and how they streamline the software development process.

Understanding Monorepos: A Closer Look

A monorepo is a single, centralized version control repository that holds multiple projects, libraries, and applications. Traditionally, organizations would employ multiple repositories to manage their projects. However, as projects grow in scale and complexity, managing them individually becomes challenging. Monorepos aim to address this issue by consolidating multiple projects under a single repository.

Advantages of Monorepos:

Cross-Project Consistency:
Maintaining a consistent coding style, shared configurations, and conventions across projects is simpler within a monorepo. This leads to a more cohesive and standardized codebase.
Unified Versioning:
In a monorepo, all projects share a unified version. This simplifies version management and ensures consistency across the entire codebase.
Simplified Build and Test Processes:
With all projects under a single repository, build and test processes are streamlined. Changes across multiple projects can be tested and validated simultaneously, ensuring compatibility and reducing integration challenges.
Efficient Code Sharing:
Monorepos allow for seamless sharing of code between projects. Shared components, libraries, and utilities can be centralized within the repository, promoting reusability and minimizing redundancy.
Atomic Changes:
Monorepos facilitate atomic commits and changes across projects. Developers can work on changes collectively, ensuring consistent and synchronized updates.
Simplified Dependency Management:
All projects within a monorepo share the same dependency graph. This simplifies dependency management and mitigates potential conflicts, enhancing stability.
Easier Refactoring:
Refactoring, or improving the structure of the code without changing its external behavior, becomes easier in a monorepo. Developers can make widespread updates confidently, knowing that they're not inadvertently breaking other parts of the system.

Use Cases of Monorepos:

Large-scale Projects:
Monorepos are ideal for managing large-scale projects with numerous interdependent modules or services.
Product Suites:
Companies with multiple related products can benefit from a monorepo, keeping all projects under one roof for streamlined management.
Component Libraries:
Monorepos are valuable for organizations developing and maintaining shared component libraries used across multiple projects.

Implementing Monorepos with Workspaces:

Modern package managers like npm, Yarn, and pnpm provide a feature called workspaces, which allows developers to manage multiple packages in a single repository. With these tools and practices, you can effectively organize a monorepo, manage dependencies, and enhance collaboration within your development team.

Conclusion:

Monorepos are a powerful tool for modern software development, streamlining version control, build processes, and code sharing. As projects continue to evolve in scale and complexity, adopting a monorepo approach can significantly enhance productivity and collaboration within development teams.

Embrace the advantages of monorepos and elevate your software development process to new heights of efficiency and organization.

Happy coding!

Stay updated with the latest tech insights by following me!

Are you in need of a highly skilled freelancer specializing in full-stack development to tackle your development challenges? Get in touch with me on Upwork.

Curious about my current projects? Take a look at my Personal Website and GitHub.

Interested in connecting? Feel free to reach out to me on LinkedIn. You can also find me on Twitter

Pushing Code to cPanel with Git

Muhammad Furqan — Sun, 01 Oct 2023 20:14:21 +0000

In the fast-paced realm of web development, effectively and efficiently deploying code is a common hurdle. Traditional methods of deployment, particularly with vanilla HTML, CSS, and JS, often involve manual processes, FTP transfers, and the potential for human errors. This can consume time, be prone to mistakes, and disrupt a smooth development workflow.

The traditional process of pushing code to cPanel using Git can be laborious. One challenge frequently encountered is integrating cPanel with online Git repositories like GitHub or GitLab. This requires additional SSH logins, managing credentials, and manually pulling changes. These obstacles often impede the seamless progress of projects.

In this article, we will explore a simple method to overcome these challenges and improve your development experience. I will guide you through the process of pushing your code directly to cPanel using Git, streamlining your workflow and optimizing your development journey.

Prerequisites

To proceed, make sure you have SSH access to your cPanel account.

You should also have Git installed on your local machine.

Step 1: Creating a Repository on cPanel

The first step is to create a Git repository on your cPanel account.

Create and navigate to the directory where you want to push your code. For example, let's say you want to push code to the app directory.

mkdir ~/app
cd ~/app

Initialize a new git repository using the following command.

git init --initial-branch=main

By default, pushing a branch to a non-bare Git repository in which the branch is currently checked out is not allowed. However, you can enable such a push by setting the receive.denyCurrentBranch option. For more detail click here.

git config receive.denyCurrentBranch updateInstead

Step 2: Including cPanel Repository as a Remote

Next, you should include the cPanel Git repository as a remote in your local Git repository.

git remote add cpanel ssh://username@domain_name_or_ip:port/~/app

Make sure to replace username, domain_name_or_ip, and port with your own SSH credentials.

Step 3: Pushing Code to cPanel

Now, you are ready to push your code to the cPanel repository.

git push cpanel main

This command will push the main branch of your local repository to the main branch of the cPanel repository. If you wish to push your local master branch instead, you can use the following command.

git push cpanel master:main

Conclusion

Utilizing Git for code deployment can greatly improve your workflow, making the process more efficient and manageable. By following these instructions, you can effortlessly push your code to cPanel and ensure a seamless deployment process for your web projects. Happy deployment!

Stay updated with the latest tech insights by following me!

Are you in need of a highly skilled freelancer specializing in full-stack development to tackle your development challenges? Get in touch with me on Upwork.

Curious about my current projects? Take a look at my Personal Website and GitHub.

Interested in connecting? Feel free to reach out to me on LinkedIn. You can also find me on Twitter

JavaScript-Independent Web Apps: A Step Toward Inclusive Digital Experiences

Muhammad Furqan — Fri, 22 Sep 2023 21:09:48 +0000

In today’s digital era, where advanced web applications reign supreme, it is crucial to prioritize accessibility and usability for users in different scenarios. A key factor in achieving this is ensuring that the fundamental functionalities of a web application work seamlessly, even when JavaScript is turned off. In this article, we will explore the significance of this aspect and discover how SvelteKit can effortlessly help you achieve it.

Why Web Apps Should Function Without JavaScript?

Enhancing Accessibility and Inclusivity: A considerable proportion of individuals who use the internet rely on assistive technologies that may not fully support JavaScript. By developing web applications that can function without JavaScript, we can create a more inclusive online experience, catering to a wider range of users.

Optimizing SEO and Search Engine Indexing: Search engines often face challenges in indexing content within web applications that heavily rely on JavaScript. Ensuring that essential features can work without JavaScript enhances search engine visibility and overall performance in terms of search engine optimization (SEO), ultimately leading to improved discoverability.

Boosting Performance on Low-End Devices: Certain devices or browsers may lack the necessary processing power to smoothly handle complex JavaScript operations. By allowing core functionalities to operate without relying on JavaScript, we effectively optimize performance for these devices, resulting in an enhanced user experience.

Ensuring Compatibility with Older Browsers and Devices: Older browsers or devices might not support the latest functionalities offered by JavaScript technology. By enabling core features to function independently from JavaScript, we ensure compatibility and enable users utilizing older technology to still access and utilize the application efficiently.

How SvelteKit Enables JavaScript-Independent Functionality?

SvelteKit is a modern web application framework that allows you to build highly interactive and dynamic single-page applications (SPAs). However, it provides the capability to build web apps that can perform essential tasks such as rendering data and submitting data even without JavaScript. Rich Harris, the developer and caretaker of Svelte and SvelteKit, adheres to this fundamental principle in all his creations. It serves as his guiding philosophy.

Here’s how SvelteKit ensures the above concept:

Hybrid Approach: SvelteKit adopts a unique strategy that combines server-side rendering (SSR) for the first page loads and effortlessly switches to a client-side application for subsequent interactions. Making web apps work just like modern single-page applications.

Ensuring Server-rendered Content as Backup: To ensure that important content is still accessible when JavaScript is disabled, SvelteKit renders essential content on the server initially and handles data post-processing in a manner reminiscent of PHP. This guarantees that crucial features remain fully functional regardless of the user’s JS settings.

Experience It Yourself

Witness firsthand the practical application of this idea through a live demonstration: SvelteKit E-commerce

You can disable JavaScript in Google Chrome using this link.

To delve into the code for the above project, visit the GitHub repository.

Conclusion

Prioritizing the functionality of core features without JavaScript is a testament to a web app’s resilience and commitment to inclusivity. With SvelteKit, achieving this goal becomes effortless, enhancing accessibility, SEO, and user experience. Embrace the hybrid approach, ensure essential functionality always works, and build a web app that truly caters to all users.

Stay updated with the latest tech insights by following me!

Are you in need of a highly skilled freelancer specializing in full-stack development to tackle your development challenges? Get in touch with me on Upwork.

Curious about my current projects? Take a look at my Personal Website and GitHub.

Interested in connecting? Feel free to reach out to me on LinkedIn. You can also find me on Twitter

Working with Git has never been this easy!!!

Muhammad Furqan — Wed, 07 Jun 2023 14:54:56 +0000

🚀 Excited to Share: Meet LazyGit, Your Ultimate Time-Saver for Git Management! 🎉

📢 Hey there, I wanted to introduce you to a fantastic tool that has been an absolute game-changer in my Git workflow: LazyGit! If you're a developer like me, you know the importance of efficient version control and collaboration. That's why I can't help but share the awesomeness of LazyGit.

🌟 So, what exactly is LazyGit? It's a powerful command-line interface (CLI) tool that simplifies and streamlines your Git management tasks.

🎯 Here are some of the standout features that make LazyGit a must-have tool:

1️⃣ Intuitive Interface: LazyGit provides a clean and user-friendly interface that makes it a breeze to navigate through your Git repositories. Say goodbye to confusing and cluttered terminal screens!

2️⃣ Time-Saver: With LazyGit, you can perform complex Git operations with just a few keystrokes. It automates repetitive tasks, saving you precious time.

3️⃣ Efficient Workflow: Managing branches, committing changes, and resolving conflicts has never been easier. LazyGit offers a seamless workflow, enabling you to focus on what matters most—writing amazing code!

💪 Ready to take your Git game to the next level? Getting started with LazyGit is a breeze! Simply head over to the official LazyGit repository on GitHub and follow the easy installation instructions. It supports multiple operating systems, so you can get up and running in no time.

⭐️ Trust me when I say that LazyGit has revolutionized the way I manage my Git repositories. It's a time-saving gem that boosts productivity and simplifies collaboration. Don't miss out on this incredible tool—give it a try today!

🔗 Here's the link to the LazyGit repository: https://github.com/jesseduffield/lazygit

Working with Modal has never been this easy!!!

Muhammad Furqan — Tue, 06 Jun 2023 18:34:15 +0000

Create a modal with just HTML using a dialog tag. Here is the complete code:

<html>
  <head>
    <style>
      #dialog {
        width: 400px;
        padding: 20px;
        background-color: #f1f1f1;
        border: 1px solid #ccc;
        border-radius: 4px;
      }

      #dialog h2 {
        color: #333;
        font-size: 18px;
        margin-bottom: 10px;
      }

      #dialog p {
        color: #555;
        font-size: 16px;
        margin-bottom: 20px;
      }

      #close {
        background-color: #ddd;
        border: none;
        padding: 10px 20px;
        color: #333;
        font-size: 14px;
        border-radius: 4px;
        cursor: pointer;
      }

      #close:hover {
        background-color: #bbb;
      }
    </style>
  </head>

  <body>
    <button onclick="openDialog()">Open Dialog</button>
    <dialog id="dialog">
      <h2>Dialog Title</h2>
      <p>This is the content of the dialog box.</p>
      <button onclick="closeDialog()">Close Dialog</button>
    </dialog>

    <script>
      function openDialog() {
        document.getElementById("dialog").showModal();
      }
      function closeDialog() {
        document.getElementById("dialog").close();
      }
    </script>
  </body>
</html>

Phind: The AI search engine for developers.

Muhammad Furqan — Tue, 18 Apr 2023 18:39:26 +0000

Great news for developers! There is a new AI-powered search engine made specifically for developers called Phind.

One of the significant benefits of using Phind is its capability to provide the latest updates on APIs, libraries, and frameworks. Since it regularly extracts the most recent information from the internet, you can be assured that you are receiving the most up-to-date information that is available. Unlike other language models, such as ChatGPT, which has a limited knowledge capacity, Phind is consistently learning and enhancing. Therefore, as new information emerges, Phind will continue to provide precise and relevant information to your questions.

Give Phind a try. https://www.phind.com/

AWS CodeWhisperer: The Free AI-based Coding Assistant for Developers

Muhammad Furqan — Fri, 14 Apr 2023 20:01:37 +0000

Exciting news! AWS has recently introduced an AI-based coding assistant called CodeWhisperer, which serves as an alternative to GitHub Copilot.

The best part is that CodeWhisperer is currently free for individual users.

CodeWhisperer offers intelligent code completion suggestions to developers, enabling them to write better code in a shorter time.

If you're seeking a new AI-based coding assistant, you should definitely give AWS CodeWhisperer a try.

For more detail click here.

Better "cat" Linux Utility Alternative

Muhammad Furqan — Fri, 07 Apr 2023 19:54:46 +0000

If you're a Linux user, you might be looking for an alternative to the "cat" command that you use to view file contents in your terminal.

In that case, you might want to check out the "bat" utility instead. Unlike "cat," "bat" not only shows you the contents of a file but also highlights syntax and adds line numbers for better readability. Additionally, "bat" offers a range of customization options to help you personalize your output.

Give it a try, and you'll see how it can elevate your command line experience. You might find that once you switch to "bat," you won't want to go back to plain old "cat" again!