DEV Community: Farooq khan

Has AI made you a better developer, or just more dependent?

Farooq khan — Mon, 03 Aug 2026 11:28:03 +0000

Lately, I've realized something...

I rarely write code from scratch anymore.

Most of the time, AI helps me with debugging, implementation, or even generating complete solutions. I spend more time reviewing AI-generated code than actually writing it myself.

To be honest, I even feel like I've forgotten how to code sometimes. 😅

I open VS Code mostly to browse files and understand the project structure before asking AI for help.

I'm not against AI—I use it every day, and it's made me much more productive. But it also made me wonder:

Do you feel your coding skills have changed because of AI?
Are you doing anything to keep your problem-solving skills sharp?
How do you keep up with the constant stream of new AI tools and models?
What skills are you investing in that you think will still matter in the AI era?

I'd love to hear how other developers are adapting.

The Rise of Component-based UI Development: How to Streamline Front-end Development with React, Angular, and Vue

Farooq khan — Mon, 16 Dec 2024 03:50:48 +0000

Component-based UI development has been gaining popularity in recent years as a more efficient way to streamline front-end development. With the rise of frameworks like React, Angular, and Vue, developers are able to break down complex user interfaces into smaller, reusable components, making it easier to manage and maintain code.

React, Angular, and Vue are three of the most widely-used frameworks for component-based UI development. Each has its own strengths and weaknesses, but all three offer a way to create modular, reusable components that can be easily combined to create complex user interfaces.

React, developed by Facebook, has gained a huge following in the front-end development community. It uses a virtual DOM to efficiently update the UI and offers a clear and simple way to create components using JSX, a syntax extension that allows developers to write HTML-like code within JavaScript.

Angular, developed by Google, is a comprehensive framework that includes everything developers need to build robust web applications. It uses TypeScript, a superset of JavaScript, and offers a powerful data binding system that makes it easy to update the UI in response to user actions.

Vue, created by ex-Google engineer Evan You, is a lightweight framework that aims to be easy to learn and use. It offers a simple and flexible API for creating components and provides built-in state management and routing capabilities.

One of the key benefits of component-based UI development is the ability to create reusable components that can be used throughout an application. This can help to reduce code duplication and make it easier to maintain and update the UI over time. It also makes it easier to collaborate with other developers, as components can be easily shared and reused in different parts of an application.

Another advantage of component-based UI development is the ability to create a more modular and scalable codebase. By breaking down the UI into smaller components, developers can more easily test and debug their code, as well as make changes and updates without affecting other parts of the application.

In recent years, there have been some new trends and insights in component-based UI development. One trend is the use of tools like Storybook and Bit to create and showcase components in isolation, making it easier to develop and test components independently of the rest of the application.

Another trend is the use of design systems and component libraries to create consistent and cohesive user interfaces. By using pre-built components and styles, developers can speed up development and ensure a consistent look and feel across their applications.

Overall, component-based UI development with frameworks like React, Angular, and Vue offers a powerful way to streamline front-end development and create more maintainable and scalable codebases. By breaking down the UI into smaller, reusable components, developers can create more flexible and modular applications that are easier to update and maintain over time.

The growing importance of React Hooks in front-end development

Farooq khan — Mon, 18 Nov 2024 03:48:44 +0000

React Hooks have been gaining popularity in the front-end development community due to their efficiency and flexibility in managing state and side effects in React applications. The introduction of Hooks in React 16.8 has revolutionized the way developers write and structure their code, making it more readable, maintainable, and reusable.

One of the main reasons for the growing importance of React Hooks is their ability to simplify and streamline the management of state in functional components. Before the introduction of Hooks, developers had to rely on class components to manage state, which often led to complex and verbose code. With Hooks, developers can now use the useState Hook to add state to their functional components, making it easier to manage and update state without needing to refactor the entire component.

Another key advantage of React Hooks is their ability to handle side effects in a more concise and efficient way. With the useEffect Hook, developers can perform side effects, such as data fetching or updating the DOM, in functional components without the need for lifecycle methods. This not only simplifies the code but also reduces the likelihood of bugs and improves performance.

Furthermore, React Hooks promote code reusability by allowing developers to extract reusable logic into custom Hooks. This makes it easier to share and reuse code across different components and projects, leading to more scalable and maintainable applications.

Recent insights suggest that the adoption of React Hooks is steadily increasing among front-end developers, with many choosing Hooks over class components for new projects. As more developers become familiar with Hooks and their benefits, it is expected that Hooks will become the standard way of writing React components in the near future.

In conclusion, the growing importance of React Hooks in front-end development is evident in their ability to simplify state management, handle side effects efficiently, and promote code reusability. By leveraging the power of Hooks, developers can write cleaner, more maintainable code and build better user experiences in their React applications.

React best practices

Farooq khan — Mon, 28 Oct 2024 19:42:10 +0000

Artificial intelligence (AI) is a rapidly evolving technology that has the potential to revolutionize various aspects of society. From self-driving cars to personalized recommendations on streaming services, AI is already making its mark in our daily lives. However, with its increasing capabilities and implications, there is much debate about its impact on society.

One of the key concerns surrounding AI is its potential to disrupt the job market. As AI becomes more sophisticated, it has the capability to automate tasks that were once done by humans. This could lead to job displacement in various industries, potentially causing economic hardships for many individuals. While AI has the potential to create new job opportunities in fields such as data science and machine learning, the transition may not be smooth for everyone.

Another concern is the ethical implications of AI. As AI systems learn from vast amounts of data, there is a risk of perpetuating biases present in the data. For example, AI algorithms used in hiring processes may inadvertently discriminate against certain demographic groups. Additionally, there is concern about the use of AI in surveillance and monitoring, raising questions about privacy and civil liberties.

Despite these concerns, there are also potential benefits of AI for society. AI has the potential to improve healthcare outcomes through more accurate diagnostics and personalized treatment plans. It can also enhance efficiency in various industries, leading to cost savings and increased productivity. Moreover, AI has the potential to tackle complex societal problems, such as climate change and poverty, through data-driven solutions.

As AI continues to advance, it is crucial for policymakers, businesses, and individuals to address the potential risks and benefits of this technology. Ethical guidelines and regulations should be put in place to ensure that AI is used responsibly and for the greater good of society. Additionally, investments in education and training programs can help individuals adapt to the changing job market and harness the potential of AI for personal and professional growth.

In conclusion, AI has the power to shape the future of society in significant ways. While there are concerns about its impact, there are also opportunities for positive change. By approaching AI with caution and a focus on ethical considerations, we can harness its potential to create a more inclusive and prosperous society for all.

Unlocking Machine Learning in the Browser with TensorFlow.js

Farooq khan — Wed, 23 Oct 2024 17:22:58 +0000

In recent years, machine learning has shifted from a specialized domain to something accessible to all, thanks to advances in both hardware and software. One of the most exciting developments in this space is TensorFlow.js, a powerful JavaScript library that allows developers to run machine learning models directly in the browser. This post dives into the key benefits and use cases of TensorFlow.js, making it easier for you to understand how it can be integrated into web projects.

What is TensorFlow.js?

TensorFlow.js is an open-source library that allows you to run machine learning models in the browser or on Node.js. It brings the flexibility of JavaScript into the machine learning world by enabling developers to train, fine-tune, and deploy models without leaving the browser environment. TensorFlow.js is built on top of TensorFlow, a popular machine learning framework, but brings additional features tailored for web and JavaScript developers.

Why TensorFlow.js?

Run Anywhere: One of the greatest strengths of TensorFlow.js is that it works wherever JavaScript runs—whether in the browser or server-side with Node.js. This makes it ideal for creating interactive web applications that harness the power of machine learning.
No Need for Backend Servers: With TensorFlow.js, developers can run ML models directly in the browser. This eliminates the need for backend infrastructure, reducing latency and making applications faster, more interactive, and privacy-focused since data doesn’t have to leave the client-side.
Train Models in Real-time: TensorFlow.js doesn't just allow running pre-trained models—it lets you train models on the fly. This real-time training capability can be extremely useful for applications like personalized recommendations, interactive learning platforms, or games.
Web-friendly Architecture: Since TensorFlow.js is built in JavaScript, it integrates seamlessly into modern web development workflows. Whether you use React, Angular, or plain HTML5, TensorFlow.js can easily slot into your project.

Key Features

Pre-trained Models: TensorFlow.js provides a variety of ready-to-use models that can be easily integrated into your web app. Whether it's image recognition, pose detection, or sentiment analysis, you can get started quickly without needing a deep background in machine learning.
Transfer Learning: You can customize pre-trained models to suit your specific needs without requiring a large dataset. Transfer learning in TensorFlow.js helps you fine-tune these models with your own data, making the library powerful for both general and specialized applications.
GPU Acceleration: TensorFlow.js can leverage WebGL to accelerate computation in the browser using the client’s GPU. This brings high-performance machine learning to browsers with near-native speed, making it feasible to run complex models.

Popular Use Cases

Real-time Image Classification: Use TensorFlow.js to run image recognition directly in the browser. Applications like augmented reality, interactive art installations, or web-based image search engines can benefit from this.
Pose Detection in Web Apps: TensorFlow.js has models that allow real-time pose detection, perfect for interactive applications such as fitness tracking, gesture-based controls, and video conferencing apps.
Sentiment Analysis: With TensorFlow.js, you can integrate natural language processing (NLP) models to analyze user input in real-time. This can be used to measure user satisfaction on websites, filter content, or personalize recommendations based on a user’s mood.
Educational Tools: TensorFlow.js opens up machine learning to educators and learners alike. By building ML models that run in the browser, developers can create interactive tools that teach concepts like computer vision or natural language processing in an engaging way.

Getting Started with TensorFlow.js
TensorFlow.js is available via CDN, NPM, or can be downloaded directly. Here’s a simple code example to load a pre-trained model for image classification:

// Load TensorFlow.js
import * as tf from '@tensorflow/tfjs';

// Load a pre-trained MobileNet model
const model = await tf.loadGraphModel('https://tfhub.dev/google/imagenet/mobilenet_v2_100_224/classification/3');

// Load an image from the DOM and make a prediction
const imgElement = document.getElementById('image');
const prediction = await model.predict(tf.browser.fromPixels(imgElement));
console.log(prediction);

This code snippet loads a MobileNet model, which can classify objects in images. The tf.browser.fromPixels() function takes an image from the DOM and processes it, allowing the model to make a prediction directly in the browser.

Final Thoughts

TensorFlow.js is a game-changer for developers looking to harness machine learning without needing deep knowledge of ML frameworks. Its browser-based nature makes it perfect for web developers who want to add advanced AI features to their applications, whether for interactive experiences, data analysis, or educational tools.

As AI continues to grow in importance across industries, tools like TensorFlow.js make it easier than ever for developers to bring these innovations into everyday web applications.

Data-Tables in React.js made easy with MDBReact

Farooq khan — Mon, 17 Feb 2020 07:09:52 +0000

Over the last 3 months, I have been working on a project with React.js .
I'm trying to add DataTables.net into my react project and I failed in all the way I have tried. Finally I came to conclusion that, it's almost impossible to add data-tables into react. Then I discovered a package MDBReact Link to mdbreact which is actually a product of MDBootstrap .
Then It became easy to add datatables into my react project and the main thing is , it is customizable .
In this post, we are going to see how to add data-tables into our existing react project.
First, create new react project using

create-react-app reactDb

Now, go to reactDb Folder,

cd reactDb

Then, Install mdbreact package into our project by using,

npm install --save mdbreact

Now, Import the styles files into your src/index.js file using,

import "@fortawesome/fontawesome-free/css/all.min.css";
import "bootstrap-css-only/css/bootstrap.min.css";
import "mdbreact/dist/css/mdb.css";

Now all you have to do is to open your App.js . And import mdbreact package with MDBDatatable .
Add the following line in top of your App.js file ,

import React from "react";
import { MDBDataTable } from "mdbreact";

Then Define few values which we needs to show in datatables.
You can define it as const as of now, or you can define the data as state which is changeable when state updated.

const data = {
  columns: [
    {
      label: "Name",
      field: "name",
      sort: "asc",
      width: 150
    },
    {
      label: "Position",
      field: "position",
      sort: "asc",
      width: 270
    },
    {
      label: "Office",
      field: "office",
      sort: "asc",
      width: 200
    },
    {
      label: "Age",
      field: "age",
      sort: "asc",
      width: 100
    },
    {
      label: "Start date",
      field: "date",
      sort: "asc",
      width: 150
    },
    {
      label: "Salary",
      field: "salary",
      sort: "asc",
      width: 100
    }
  ],
  rows: [
    {
      name: "Tiger Nixon",
      position: "System Architect",
      office: "Edinburgh",
      age: "61",
      date: "2011/04/25",
      salary: "$320"
    },
    {
      name: "Yuri Berry",
      position: "Chief Marketing Officer (CMO)",
      office: "New York",
      age: "40",
      date: "2009/06/25",
      salary: "$675"
    },
    {
      name: "Caesar Vance",
      position: "Pre-Sales Support",
      office: "New York",
      age: "21",
      date: "2011/12/12",
      salary: "$106"
    },
    {
      name: "Doris Wilder",
      position: "Sales Assistant",
      office: "Sidney",
      age: "23",
      date: "2010/09/20",
      salary: "$85"
    },
    {
      name: "Angelica Ramos",
      position: "Chief Executive Officer (CEO)",
      office: "London",
      age: "47",
      date: "2009/10/09",
      salary: "$1"
    },
    {
      name: "Gavin Joyce",
      position: "Developer",
      office: "Edinburgh",
      age: "42",
      date: "2010/12/22",
      salary: "$92"
    },
    {
      name: "Jennifer Chang",
      position: "Regional Director",
      office: "Singapore",
      age: "28",
      date: "2010/11/14",
      salary: "$357"
    },
    {
      name: "Brenden Wagner",
      position: "Software Engineer",
      office: "San Francisco",
      age: "28",
      date: "2011/06/07",
      salary: "$206"
    },
    {
      name: "Fiona Green",
      position: "Chief Operating Officer (COO)",
      office: "San Francisco",
      age: "48",
      date: "2010/03/11",
      salary: "$850"
    },
    {
      name: "Shou Itou",
      position: "Regional Marketing",
      office: "Tokyo",
      age: "20",
      date: "2011/08/14",
      salary: "$163"
    },
    {
      name: "Michelle House",
      position: "Integration Specialist",
      office: "Sidney",
      age: "37",
      date: "2011/06/02",
      salary: "$95"
    },
    {
      name: "Suki Burks",
      position: "Developer",
      office: "London",
      age: "53",
      date: "2009/10/22",
      salary: "$114"
    },
    {
      name: "Prescott Bartlett",
      position: "Technical Author",
      office: "London",
      age: "27",
      date: "2011/05/07",
      salary: "$145"
    },
    {
      name: "Gavin Cortez",
      position: "Team Leader",
      office: "San Francisco",
      age: "22",
      date: "2008/10/26",
      salary: "$235"
    },

    {
      name: "Hermione Butler",
      position: "Regional Director",
      office: "London",
      age: "47",
      date: "2011/03/21",
      salary: "$356"
    },
    {
      name: "Lael Greer",
      position: "Systems Administrator",
      office: "London",
      age: "21",
      date: "2009/02/27",
      salary: "$103"
    },
    {
      name: "Jonas Alexander",
      position: "Developer",
      office: "San Francisco",
      age: "30",
      date: "2010/07/14",
      salary: "$86"
    },
    {
      name: "Shad Decker",
      position: "Regional Director",
      office: "Edinburgh",
      age: "51",
      date: "2008/11/13",
      salary: "$183"
    },
    {
      name: "Michael Bruce",
      position: "Javascript Developer",
      office: "Singapore",
      age: "29",
      date: "2011/06/27",
      salary: "$183"
    },
    {
      name: "Donna Snider",
      position: "Customer Support",
      office: "New York",
      age: "27",
      date: "2011/01/25",
      salary: "$112"
    }
  ]
};

I just added 20 data into table . Then in your render function , return the MDBDatatable component by using ,

export default function App() {
  return <MDBDataTable striped bordered hover data={data} />;
}

Now you can able to see the datatable with search, pagination, sorting options.
It's easy right?
I have added my codesandbox code Below. You can try it easily.
And don't forget to check other components in mdbreact here.

bootstrap Components made easy for react with reactstrap .

Farooq khan — Thu, 26 Dec 2019 12:07:11 +0000

Hi everyone,
This is my first post with dev.to .
I hope I will post more posts in future .

Now straight to the point . I'm using reactjs for my new project and I was impressed with functionalities of react.js. But still I was confused with reactjs . I know that react js is a front end framework(not a framework though) . Still I was struggling to design a perfect website with reactjs . Using bootstrap for every single component was a nightmare for me to do until I found out ReactStrap .

ReactStrap is a react component for using bootstrap components inside your reactjs app .
By using reactstrap it is easy to import boostrap components inside our react.js app.
ReactStrap is a way to quickly add Bootstrap styling to a React application.

Reactstrap contains bootstrap components already styled.
ReactStrap will make components available to you that are already styled, so all you have to do is include them into your project and tweak their

Install it using npm command.

npm install --save reactstrap react react-dom

After installed, just import the reactstrap in your code.

import * from reactstrap;

Or if you want particular component from reactstrap, you can import particular components from reactstrap .
For example, add Button component from reactstrap .

import { Button } from 'reactstrap';

Then, In your render function use reactstrap component like this ,

<Button color="primary">Default button</Button>

Simple right ?
It is even fun to add components with reactstrap .
We can also pass predefined props to control the styling.

To learn more about reactstrap , Check their ReactStrap official website

How to download , apply, revert patches in wordpress

Farooq khan — Fri, 11 Oct 2019 04:49:48 +0000

To download a patch , go to plugin trac history and download it,.
it is also called as development blog or changelog.
Today I’m going to patch aregato autoresponder plugin by using its changelogs.

The new version of aregato diff file santizes the input ,.
The previous version had the bug which will be easily hacked by cross side scripting.

Get the diff file from below link .

https://plugins.trac.wordpress.org/changeset?old_path=%2Fbft-autoresponder&old=1943235&new_path=%2Fbft-autoresponder&new=1943235&sfp_email=&sfph_mail=

Change log is 1943235 .

Scroll to bottom., click on Unified Diff and download the diff file.

Now move the changeset diff file to your wordpress site where bft autoresponder plugin located.

Now I’m going to patch only one file /views/unsubscribe.html.php file.
Move the diff file to

wp-content/plugins/bft-autoresponder/views/

Now put the following command and replace the filename.diff with your diff file name.

=== $ patch -p0 > filename.diff ===

It will run the command and give following lines.

== The text leading up to this was: ==
== ————————– ==
== |Index: /bft-autoresponder/trunk/views/unsubscribe.html.php ==
== |=================================================================== ==
== |— /bft-autoresponder/trunk/views/unsubscribe.html.php (revision 1943234) ==
== |+++ /bft-autoresponder/trunk/views/unsubscribe.html.php (revision 1943235) ==
== ————————– ==
== File to patch: unsubscribe.html.php ==
== patching file unsubscribe.html.php ==

Now check the unsubscribe.html.php file . Line no 3 should be changed .

To revert the patch put the following command.

$patch -p0 -R filename.diff