DEV Community: Zeeshan Haider Shaheen

Stop Fighting URL State in React: Introducing react-zod-url-state

Zeeshan Haider Shaheen — Thu, 14 Aug 2025 11:12:07 +0000

Ever built a search page with filters and pagination, only to realize users lose everything when they refresh? Or tried to share a filtered view with a colleague and sent them a useless base URL?

I've been there. Too many times.

After writing the same URLSearchParams boilerplate for the hundredth time, I decided to build something better: react-zod-url-state - a TypeScript-first library that automatically syncs your component state with URL parameters.

The Problem: URL State is Painful

Here's what we usually end up writing for a simple product filter:

export function ProductFilters() {
  const searchParams = useSearchParams();
  const router = useRouter();
  const [q, setQ] = useState('');
  const [page, setPage] = useState(1);
  const [sort, setSort] = useState('name');
  const [inStock, setInStock] = useState(false);

  // Sync URL to state on mount
  useEffect(() => {
    setQ(searchParams.get('q') || '');
    setPage(parseInt(searchParams.get('page')) || 1);
    setSort(searchParams.get('sort') || 'name');
    setInStock(searchParams.get('inStock') === 'true');
  }, [searchParams]);

  // Sync state to URL
  const updateUrl = useCallback((updates) => {
    const params = new URLSearchParams(searchParams);
    Object.entries(updates).forEach(([key, value]) => {
      if (value === undefined || value === '') {
        params.delete(key);
      } else {
        params.set(key, String(value));
      }
    });
    router.replace(`?${params.toString()}`);
  }, [searchParams, router]);

  const handleSearch = (value) => {
    setQ(value);
    updateUrl({ q: value, page: 1 });
  };

  // ... more handlers
}

That's 50+ lines for basic URL state management. And we haven't even handled arrays, dates, or validation yet!

The Solution: Declarative URL State

With react-zod-url-state, the same functionality becomes:

import { defineUrlState, useUrlState, z } from "react-zod-url-state";

const filters = defineUrlState(z.object({
  q: z.string().default(""),
  page: z.number().int().min(1).default(1),
  sort: z.enum(["name", "price"]).default("name"),
  inStock: z.boolean().default(false),
}));

export function ProductFilters() {
  const [state, setState] = useUrlState(filters);

  return (
    <div>
      <input
        value={state.q}
        onChange={(e) => setState({ 
          q: e.target.value, 
          page: 1 
        })}
      />
      <select
        value={state.sort}
        onChange={(e) => setState({ 
          sort: e.target.value 
        })}
      >
        <option value="name">Name</option>
        <option value="price">Price</option>
      </select>
    </div>
  );
}

Result: 85% less code, automatic type safety, zero boilerplate.

Key Features

🔒 Type Safety with Zod

Define your URL state schema once, get TypeScript validation everywhere:

const filters = defineUrlState(z.object({
  categories: z.array(z.string()).default([]),
  dateRange: z.object({
    from: z.date(),
    to: z.date()
  }).optional(),
  price: z.object({
    min: z.number(),
    max: z.number()
  }).default({ min: 0, max: 1000 })
}));

🎯 Automatic Serialization

Handles complex data types automatically:

Arrays: categories=shoes,boots
Booleans: inStock=true
Numbers: page=2&price=100
Dates: startDate=2024-01-15
Enums: sort=price

⚡ Debounced Updates

Prevent URL spam with built-in debouncing:

const filters = defineUrlState(schema, {
  debounceMs: 300, // Wait 300ms before updating URL
  mode: "replace"  // Don't create history entries
});

🔗 Share State Easily

Generate shareable URLs with one line:

const { copyShareLink } = useShareLink(filters);

<button onClick={() => copyShareLink()}>
  Share Current Filters
</button>

🔄 Reset to Defaults

Clear all filters instantly:

const resetState = useResetUrlState(filters);

<button onClick={resetState}>
  Clear All Filters
</button>

Framework Support

Works seamlessly with your favorite React framework:

Next.js (App Router & Pages Router)

const [state, setState] = useNextUrlState(filters);

React Router

const [state, setState] = useReactRouterUrlState(filters);

Server-Side Rendering

// Next.js App Router
export default function Page({ searchParams }) {
  const state = filters.readFrom(searchParams);
  // Use state for data fetching
}

// React Router loader
export async function loader({ request }) {
  const state = getStateFromLoader(filters, request);
  // Use state for data fetching
}

Real-World Use Cases

Perfect for:

🔍 Search interfaces with filters and sorting
📊 Data tables with pagination and column sorting
🎛️ Dashboard filters that users need to bookmark
📈 Analytics views where state sharing is crucial
🛍️ E-commerce product catalogs

Getting Started

npm install react-zod-url-state

The library has zero dependencies besides React and Zod, and works with all modern React patterns including concurrent features.

Why I Built This

After years of copying and pasting URL state management code across projects, I realized we needed a better abstraction. The React community has amazing solutions for form state (React Hook Form), global state (Zustand, Redux), but URL state remained stuck in the stone age.

react-zod-url-state brings the same declarative, type-safe approach to URL state that we expect from modern React development.

Try It Out

Check out the interactive demo or install it in your project:

npm install react-zod-url-state

The npm package has more examples and advanced usage patterns.

What's your current approach to URL state management? Have you run into similar pain points? I'd love to hear your thoughts and feedback!

If this solved a problem for you, consider giving it a ⭐ on GitHub - it helps other developers discover the library.

The React interview mistake I made (and how you can avoid it) 😅

Zeeshan Haider Shaheen — Mon, 26 May 2025 19:18:40 +0000

Last month, I bombed a React interview. Not because I didn’t know the technical stuff, but because I treated it like a coding quiz instead of a conversation.

The interviewer asked: “How would you handle state management in a large React app?”

My brain immediately went: Redux! Context API! Zustand! And I started rattling off solutions like I was reading from documentation.

The interviewer stopped me and said, “That’s great, but why would you choose one over another?”

I froze. I knew the tools but hadn’t thought about the reasoning behind choosing them.
Here’s what I learned from that humbling experience:
Interviews aren’t about proving you’re a walking React encyclopedia. They want to see how you think through real problems that teams face every day.

Now when I get asked the same question, I approach it differently:
“It depends on the team and project needs. If it’s a small team building an internal tool, I might start with React’s built-in useState and useContext to keep things simple. But if we’re dealing with complex user flows, frequent state updates, and a larger team that needs predictable patterns, I’d lean toward something like Redux Toolkit for better debugging and collaboration.”

The difference? I’m not just listing technologies. I’m showing I understand the human side of development - team dynamics, project constraints, and long-term maintenance.

The best React developers aren’t just code wizards. They’re problem-solvers who consider the people behind the keyboards.

To anyone else job hunting right now:
Remember that the interviewer isn’t trying to stump you. They’re trying to imagine working with you on their team. Show them not just what you know, but how you think.

We’ve got this! 💪

Currently looking for my next React opportunity - feel free to connect if you know of any openings or just want to share interview war stories.

Everything You Need to Know About Docker

Zeeshan Haider Shaheen — Tue, 18 Feb 2025 12:54:53 +0000

In today’s fast-paced development world, containerization has revolutionized how we build, ship, and run applications. Docker is the leading platform that makes containerization accessible, efficient, and reliable. In this post, we’ll cover every detail—from the underlying concepts and architecture to building a full-stack application with Docker and deploying it on another machine. Whether you’re new to Docker or an experienced developer looking to refine your skills, this guide will provide a comprehensive overview.

Table of Contents

What is Docker?
Key Docker Concepts and Terminology
Why Use Docker?
Installing Docker
Docker Architecture
Understanding and Writing a Dockerfile
Docker Compose for Multi-Container Applications
Containerizing a Full-Stack Application
Running Your Dockerized Application on Another Machine
Conclusion

What is Docker?
Docker is an open-source platform that automates the deployment, scaling, and management of applications using containerization. In simple terms, Docker allows you to package an application along with its dependencies, libraries, and configuration files into a single container. This container can then run reliably on any machine—whether it’s a developer’s laptop, a testing environment, or a production server—without any “it works on my machine” issues.

Key Takeaway
Consistency: Docker ensures that the environment is consistent regardless of where the application is deployed.

Key Docker Concepts and Terminology
Before diving deeper, let’s review some essential Docker terms:

Image:
A Docker image is a lightweight, standalone, and executable package that contains everything needed to run a piece of software. Think of it as a snapshot or template of your application and its environment.
Container:
A container is a runtime instance of an image. When you run a Docker image, it becomes one or more containers. Containers are isolated from one another and from the host system, which helps prevent conflicts.
Dockerfile:
A Dockerfile is a text file that contains a list of instructions on how to build a Docker image. It automates the image creation process, making it reproducible.
Docker Hub:
Docker Hub is a cloud-based repository where you can find and share container images. It’s similar to GitHub for code but for Docker images.
Volumes:
Volumes are used for persisting data outside of containers. They are essential when you need to store data (like database files) that shouldn’t be removed when a container is deleted.
Networks:
Docker networks allow containers to communicate with each other and with external systems securely. They can be configured to control which containers can talk to each other.

Why Use Docker?
Using Docker offers several significant benefits:

Portability:
Containers can run on any system that supports Docker. This means the environment you develop in can be identical to your production environment.
Isolation:
Each container is isolated from other containers and the host system. This isolation prevents conflicts and makes it easier to manage dependencies.
Scalability:
Docker integrates with orchestration tools like Kubernetes, allowing you to scale applications horizontally and manage complex deployments efficiently.
Resource Efficiency:
Unlike full-blown virtual machines, Docker containers share the host’s OS kernel, which makes them much lighter and faster to start up.
Simplified Dependency Management:
With Docker, you don’t have to worry about setting up the correct versions of libraries and tools on every machine because they are bundled with your application.

Installing Docker

For macOS and Windows

Download Docker Desktop:
Visit Docker Desktop and download the installer for your operating system.
Installation:
Follow the installation instructions. Docker Desktop provides a user-friendly graphical interface to manage your containers, images, and settings.

For Linux
On Linux (e.g., Ubuntu/Debian), follow these steps:

sudo apt-get update
sudo apt-get install \
    ca-certificates \
    curl \
    gnupg \
    lsb-release

# Add Docker’s official GPG key
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg

# Set up the stable repository
echo \
  "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu \
  $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

sudo apt-get update
sudo apt-get install docker-ce docker-ce-cli containerd.io

Post-installation tip:
Add your user to the dockergroup to run Docker commands without sudo:

sudo usermod -aG docker $USER

After a system logout/login, you’ll be able to run Docker commands without administrative privileges.

Docker Architecture

Understanding the architecture behind Docker helps explain its power and flexibility:

Docker Daemon (dockerd):
The Docker daemon is a background service responsible for building, running, and managing containers. It listens for Docker API requests and handles container lifecycle events.
Docker Client:
The Docker client is a command-line tool (docker) that allows users to interact with the Docker daemon. You type commands like docker run or docker build, and the client passes these commands to the daemon.
REST API:
Docker exposes a REST API which allows programmatic control over Docker. This API is used by the Docker client and can be integrated into other tools.
Containers and Images:
Images are the blueprints for containers. When the daemon creates a container from an image, it uses isolation technologies (like namespaces and control groups) provided by the host OS.

Understanding and Writing a Dockerfile

A Dockerfile is a script that contains instructions to assemble a Docker image. Let’s break down a sample Dockerfile for a Node.js application:

# Use an official Node.js runtime as a parent image
FROM node:14

# Set the working directory inside the container
WORKDIR /app

# Copy package.json and package-lock.json to install dependencies
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the application code into the container
COPY . .

# Expose the port on which the app will run
EXPOSE 3000

# Define the command to run the application
CMD ["node", "app.js"]

Key Concepts in the Dockerfile:

FROM:
Specifies the base image. In this case, we’re using the official Node.js image tagged with version 14.
WORKDIR:
Sets the working directory inside the container. All subsequent commands are executed in this directory.
COPY:
Copies files from your host machine to the container. We copy the dependency files first to leverage Docker’s caching mechanism.
RUN:
Executes a command in the container. Here, it installs the dependencies.
EXPOSE:
Informs Docker that the container listens on the specified network port at runtime.
CMD:
Specifies the default command to run when the container starts.

Building and Running the Image:

# Build the Docker image with a specific tag
docker build -t my-node-app .

# Run a container from the built image, mapping port 3000 on the host to port 3000 in the container
docker run -p 3000:3000 my-node-app


---

Docker Compose for Multi-Container Applications
Real-world applications often consist of multiple services (e.g., frontend, backend, database). Docker Compose allows you to define and manage multi-container applications using a simple YAML file.

Example: Full-Stack Application
Consider an application with a frontend (React), a backend (Node.js), and a PostgreSQL database. Below is a sample docker-compose.yml:

version: '3.8'

services:
  frontend:
    build: ./frontend
    ports:
      - "3000:3000"
    depends_on:
      - backend

  backend:
    build: ./backend
    ports:
      - "5000:5000"
    depends_on:
      - db
    environment:
      - DB_HOST=db
      - DB_USER=yourusername
      - DB_PASSWORD=yourpassword

  db:
    image: postgres:13
    environment:
      POSTGRES_DB: yourdatabase
      POSTGRES_USER: yourusername
      POSTGRES_PASSWORD: yourpassword
    ports:
      - "5432:5432"
    volumes:
      - pgdata:/var/lib/postgresql/data

volumes:
  pgdata:

Explanation:

services:
Each service (frontend, backend, db) is defined separately.
build:
For services you build yourself, the build directive points to the directory containing the Dockerfile.
ports:
Maps ports on the host to ports in the container.
depends_on:
Specifies service dependencies. For example, the backend depends on the database.
environment:
Sets environment variables for the container.
volumes:
Creates persistent storage (in this case, for the database) that persists even when containers are restarted.

Running the full-stack application:

docker-compose up --build

This command builds and starts all defined services, ensuring they can communicate using Docker’s networking.

Containerizing a Full-Stack Application: Step by Step
Let’s break down the process of containerizing a full-stack application into clear steps.

1. Backend Service

Dockerfile in /backend:

FROM node:14
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 5000
CMD ["node", "server.js"]

Key Points:
- Set the working directory to ensure all files are placed correctly.
- Install dependencies before copying the rest of the code to leverage Docker caching.
- Expose the port where your API server listens.

2. Frontend Service

Dockerfile in /frontend:

For a React application, you might use a multi-stage build:

# Build stage
FROM node:14 as build
WORKDIR /app
COPY package.json ./
RUN npm install
COPY . .
RUN npm run build

# Production stage
FROM nginx:alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Key Points:
- The multi-stage build reduces the final image size by using Node.js only for building and Nginx for serving static files.
- Ensure the build output is copied to the correct directory that Nginx expects.

3. Database Service

Usage:
- Instead of building your own image, leverage an official PostgreSQL image.
- Use environment variables to configure the database and a volume for data persistence.

4. Networking and Communication

Docker Compose:
- Docker Compose automatically creates a network where each service can be reached by its service name (e.g., the backend can refer to the database as db).
Environment Variables:
- Use environment variables to share configuration settings (like database credentials) between services.

Running Your Dockerized Application on Another Machine
One of Docker’s key advantages is portability. Here’s how to ensure your application runs flawlessly on another machine:

1. Install Docker on the Target Machine:
Ensure that Docker (or Docker Desktop) is installed and running on the new machine.

2. Share Your Code and Configuration:
Provide the full source code, including all Dockerfiles, the docker-compose.yml, and any necessary .env files. This ensures that every dependency and configuration is present.

3. Build or Pull Images:

Option 1: Build Locally Run:

docker-compose up --build

This command rebuilds your images based on the provided Dockerfiles.

Option 2: Use a Container Registry Push your images to a registry (such as Docker Hub) from your development machine:

docker tag my-node-app yourusername/my-node-app
docker push yourusername/my-node-app

Then, update your docker-compose.yml to use the image from the registry. On the target machine, simply run:

docker-compose pull
docker-compose up

Conclusion

Docker has fundamentally changed how we develop, ship, and run applications. By using Docker, you can ensure that your application runs consistently across all environments—be it local development, testing, or production. This guide has walked you through every detail: from core concepts and Docker architecture to writing Dockerfiles, using Docker Compose for multi-container applications, containerizing a full-stack application, and finally running your Dockerized app on another machine.

Armed with these insights and best practices, you’re now well-equipped to leverage Docker for your projects, ensuring portability, scalability, and reliability. Happy Dockering!

Introducing react-use-apifetcher: Simplify Your API Calls in React

Zeeshan Haider Shaheen — Sat, 02 Mar 2024 20:38:18 +0000

In the ever-evolving world of web development, React remains a cornerstone for building dynamic user interfaces. However, as projects grow in complexity, managing API calls can become cumbersome, leading to repetitive code and challenging state management scenarios. To address this, we're excited to introduce react-use-apifetcher, a custom React hook designed to simplify fetching data from APIs while providing flexible data processing capabilities.

Why `react-use-apifetcher`?

While React offers the powerful useEffect hook for side effects, such as data fetching, developers often find themselves writing boilerplate code to handle loading states, errors, and data transformation. react-use-apifetcher abstracts these concerns, offering a concise and reusable solution for making API requests within your React components.

Features

Simplified State Management: Automatically handles loading and error states, allowing you to focus on what matters: your application's logic and UI.
Data Processing Callback: Optionally transform or filter your data using a callback function before setting the component's state, all within the same hook call.
TypeScript Support: Fully typed for a better development experience, ensuring type safety for your API responses and processed data.

Getting Started

Installation

Begin by installing react-use-apifetcher in your React project:

npm install react-use-apifetcher

Usage

Without Callback Function

Fetch data effortlessly without additional processing:

import React from 'react';
import { useFetcher } from 'react-use-apifetcher';

const PostsComponent: React.FC = () => {
  const { data: posts, loading, error } = useFetcher('https://jsonplaceholder.typicode.com/posts');

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <ul>
      {posts?.map(post => <li key={post.id}>{post.title}</li>)}
    </ul>
  );
};

With Callback Function
Customize your data with a processing callback:

import React from 'react';
import { useFetcher } from 'react-use-apifetcher';

const FilteredPostsComponent: React.FC = () => {
  const processData = (posts) => posts.filter(post => post.userId < 5);

  const { data: filteredPosts, loading, error } = useFetcher('https://jsonplaceholder.typicode.com/posts', {}, processData);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <ul>
      {filteredPosts?.map(post => <li key={post.id}>{post.title}</li>)}
    </ul>
  );
};

Under the Hood

react-use-apifetcher leverages the Fetch API under the hood, wrapping it in a React hook that manages the request's lifecycle. By providing a callback function, you can easily integrate data processing steps within the fetch operation, streamlining your component's logic.

Conclusion

react-use-apifetcher is more than just a utility; it's a pattern for simplifying data fetching in React applications. By abstracting the repetitive aspects of API calls, it allows developers to write cleaner, more readable code. We encourage you to integrate react-use-apifetcher into your next project and contribute to its growth.

Happy coding!

📚 Check it out and let's make react-use-apifetcher even better together:
npm
github

A guide to Data Binding in Angular

Zeeshan Haider Shaheen — Fri, 29 Dec 2023 16:37:08 +0000

Data binding in Angular is a mechanism to synchronize data between the model (business logic) and the view (what the user sees). It allows for dynamic and interactive web applications. Angular provides several types of data binding:

Interpolation: Uses {{}} syntax to render data
Property Binding: Binds a property of a DOM element to a field in your component
Event Binding: Allows the application to respond to user input in the form of events
Two-Way Binding: Combines property and event binding

Understanding Interpolation and Property Binding

Interpolation

Usage: Mainly for displaying dynamic data
Syntax: {{ expression }}
Example:<div>{{ title }}</div>

Property Binding

Usage: To set an element property to a non-string data value.
Syntax: [property]="expression"
Example: <img [src]="imageUrl">

Exploring Event Binding

Event binding allows your application to respond to user actions like clicks, mouse movements, keystrokes, etc.

Syntax: (event)="handler"
Example: <button (click)="save()">Save</button>

Two-Way Binding

Two-way binding is a powerful feature that allows your model and view to be in sync. It's useful for forms and anywhere you need to both display and update a value.

Syntax: [(ngModel)]="property"
Example: <input [(ngModel)]="name">

Advanced Concepts in Data Binding

Custom Property and Event Bindings

You can create custom properties and events in your components, which can be bound using the same syntax.

Directives and Binding

Angular directives like *ngFor and *ngIf use binding to manipulate DOM elements. Understanding how they interact with your data is crucial.

Pipes and Data Transformation

Pipes allow you to transform displayed data without altering the original data source. For example, you can format dates and numbers, or limit the number of characters in a string.

Reactive Forms

Reactive forms provide a model-driven approach to handling form inputs whose values can be easily synced with the UI.

Observables and Async Pipe

Angular integrates with RxJS, a library for reactive programming. You can bind to Observables directly in your templates using the async pipe, which subscribes and unsubscribes automatically.

Conclusion

Data binding is a fundamental concept in Angular, providing a seamless way to synchronize data between the model and the view. It starts with simple interpolation and property bindings and extends to more complex scenarios involving custom components, directives, and reactive forms. Mastering data binding is key to developing interactive and dynamic Angular applications.

Various Ways to Leverage Angular Directives: An In-Depth Guide

Zeeshan Haider Shaheen — Tue, 26 Sep 2023 19:00:13 +0000

Angular Directives are a versatile and powerful feature of the Angular framework, enabling developers to modify the DOM and extend its capabilities in creative ways. In this blog, we’ll explore different ways in which Angular Directives can be used to enhance the functionality, aesthetics, and user experience of web applications.

1. Enhancing HTML Elements
Example:Creating Tooltips

Angular Directives can be used to create dynamic tooltips that provide additional information when a user hovers over an element.

ng generate directive tooltip

import { Directive, ElementRef, Input, Renderer2 } from '@angular/core';

@Directive({
  selector: '[appTooltip]'
})
export class TooltipDirective {
  @Input('appTooltip') tooltipText: string;
  tooltipElement = this.renderer.createElement('span');

  constructor(private el: ElementRef, private renderer: Renderer2) {
    this.renderer.listen(this.el.nativeElement, 'mouseover', () => {
      this.showTooltip();
    });
    this.renderer.listen(this.el.nativeElement, 'mouseout', () => {
      this.hideTooltip();
    });
  }

  showTooltip() {
    this.renderer.appendChild(this.el.nativeElement, this.tooltipElement);
    this.renderer.addClass(this.tooltipElement, 'tooltip');
    this.renderer.setProperty(this.tooltipElement, 'textContent', this.tooltipText);
  }

  hideTooltip() {
    this.renderer.removeChild(this.el.nativeElement, this.tooltipElement);
  }
}

2. Styling Elements Dynamically

Example:Changing Background Color

Directives can be used to dynamically change the styling of elements based on user interaction or other conditions.

ng generate directive dynamicStyle

import { Directive, ElementRef, Renderer2, HostListener } from '@angular/core';

@Directive({
  selector: '[appDynamicStyle]'
})
export class DynamicStyleDirective {

  constructor(private el: ElementRef, private renderer: Renderer2) {}

  @HostListener('mouseenter') onMouseEnter() {
    this.renderer.setStyle(this.el.nativeElement, 'background-color', 'yellow');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.renderer.setStyle(this.el.nativeElement, 'background-color', 'white');
  }
}

3. Manipulating the DOM Structure

Example:Creating a Collapse/Expand Directive

Directives can modify the structure of the DOM, adding or removing elements dynamically.

ng generate directive collapse

import { Directive, Input, ElementRef, Renderer2, HostListener } from '@angular/core';

@Directive({
  selector: '[appCollapse]'
})
export class CollapseDirective {
  @Input() appCollapse: boolean;

  constructor(private el: ElementRef, private renderer: Renderer2) {}

  @HostListener('click') onClick() {
    this.appCollapse = !this.appCollapse;
    this.toggleCollapse();
  }

  toggleCollapse() {
    const display = this.appCollapse ? 'none' : 'block';
    this.renderer.setStyle(this.el.nativeElement.nextElementSibling, 'display', display);
  }
}

4. Handling Events
Example: Listening to Scroll Events

Directives can be used to listen to events on elements and execute logic based on those events.

ng generate directive scroll


import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[appScroll]'
})
export class ScrollDirective {

  @HostListener('window:scroll', ['$event'])
  onScroll(event) {
    console.log('Scrolled', event);
  }
}

5. Implementing Conditional Rendering

Example: If-Else Rendering

Create custom structural directives for conditional rendering of templates.

ng generate directive customIf


import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appCustomIf]'
})
export class CustomIfDirective {
  @Input() set appCustomIf(condition: boolean) {
    if (condition) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainer.clear();
    }
  }

  constructor(private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) { }
}

Conclusion

Angular Directives are a phenomenal tool for developers looking to create dynamic, responsive, and intuitive web applications. They allow for the enhancement of HTML elements, dynamic styling, manipulation of the DOM structure, event handling, and conditional rendering, amongst other things.

By leveraging Angular Directives in creative ways, developers can solve complex problems, reduce code redundancy, and build scalable and maintainable web applications. Whether you are a beginner or an experienced developer, exploring and experimenting with Angular Directives can lead to discovering new and innovative solutions to improve your projects.
Let me know about your thoughts in the comments. Follow me on Twitter @zeeshanhshaheen for more updates.

React.js vs Angular: A Focus on Cleaner Code

Zeeshan Haider Shaheen — Sat, 19 Aug 2023 02:43:59 +0000

In the world of web development, two of the most widely used frameworks are React.js and Angular. Both have their strengths and are used to create robust, scalable applications. However, many developers find React.js to offer a cleaner and more concise approach when compared to Angular. Here's a breakdown of how React.js achieves this:

Simplicity and Flexibility

React.js
React.js embraces the simplicity of JavaScript, making it easier to learn and more flexible. Developers can use plain JavaScript to create components, providing a more intuitive development experience.

Angular
Angular introduces complex concepts like decorators, modules, and dependency injection, making the learning curve steeper. This complexity can lead to a more cluttered codebase.

Component-Based Architecture

React.js
React promotes a component-based architecture, allowing developers to create reusable and modular components. This leads to a more organized and maintainable codebase.

Angular
Though Angular also uses components, its coupling with complex templates and extensive use of directives can make the code more difficult to follow.

Performance

React.js
React's Virtual DOM provides an efficient way to update the actual DOM, leading to quicker rendering times and a smoother user experience.

Angular
Angular's real DOM approach can lead to slower performance in some scenarios, especially when handling large lists and complex data structures.

One-Way Data Binding

React.js
React employs one-way data binding, which makes data flow more predictable and manageable. This approach enhances code readability and minimizes unexpected behavior.

Angular
Angular's two-way data binding can lead to potential challenges in tracking changes within the application, sometimes making debugging more complex.

Community and Ecosystem

React.js
React's community is known for producing a wide array of third-party libraries that adhere to React's philosophy of simplicity. This allows developers to find tools that seamlessly integrate into their projects.

Angular
Angular's ecosystem, while rich and diverse, can be more fragmented, leading to potential inconsistencies in code style and structure.

Let's explore a simple example that will illustrate the difference in code between React.js and Angular for creating a basic component that displays a greeting message.

React.js Example
In React.js, you could create a simple greeting component like this:


function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}


ReactDOM.render(
  <Greeting name="John" />,
  document.getElementById('root')
);

This code demonstrates React's simplicity and use of standard JavaScript.

Angular Example
In Angular, the equivalent component might look like this:


import { Component } from '@angular/core';

@Component({
  selector: 'app-greeting',
  template: `<h1>Hello, {{name}}!</h1>`,
})
export class GreetingComponent {
  name: string = 'John';
}

// Usage
<app-greeting></app-greeting>

Angular's example requires a bit more boilerplate and introduces concepts like decorators and component metadata.

Conclusion
The React.js example uses standard JavaScript functions, making it concise and easier to understand for someone familiar with the language. On the other hand, Angular's approach, while powerful and highly structured, introduces additional concepts and syntax that might be seen as less clean or intuitive, especially for beginners.

Typescript vs JavaScript

Zeeshan Haider Shaheen — Thu, 25 May 2023 21:05:06 +0000

Introduction

Frontend development has evolved significantly, and JavaScript has long been the go-to language for building interactive web applications. However, in recent years, TypeScript has emerged as a powerful alternative that offers numerous advantages over JavaScript. TypeScript is a statically typed superset of JavaScript that brings enhanced type safety, improved code maintainability, and a robust tooling ecosystem. In this blog post, we will explore why TypeScript is essential in frontend development compared to JavaScript, providing code examples and highlighting key benefits along the way.

TypeScript's Enhanced Type Safety

One of the primary advantages of TypeScript over JavaScript is its enhanced type safety. JavaScript is dynamically typed, allowing variables to change types at runtime. While this flexibility can be convenient, it also introduces a higher risk of runtime errors that can be difficult to identify and debug. TypeScript addresses this by introducing static typing.

Let's consider an example of a JavaScript function that calculates the area of a circle:

function calculateCircleArea(radius) {
  return Math.PI * radius * radius;
}

In JavaScript, there are no explicit type annotations for the radius parameter. This lack of type information makes it challenging to understand the expected input and can lead to potential bugs. However, with TypeScript, we can provide explicit type annotations:

function calculateCircleArea(radius: number): number {
  return Math.PI * radius * radius;
}

By explicitly stating that radius should be of type number, TypeScript enables early error detection during development. If we accidentally pass a non-numeric value as the radius argument, the TypeScript compiler will raise a compilation error, helping us catch the mistake before executing the code.

This enhanced type safety provides confidence in the correctness of the code, reduces the likelihood of runtime errors, and enhances the overall reliability of frontend applications.

Improved Code Maintainability and Collaboration

As frontend projects grow in complexity, maintaining and collaborating on JavaScript codebases becomes increasingly challenging. JavaScript's dynamic nature can make it difficult to understand the structure of a codebase and the types of values being passed around. This lack of clarity often results in code that is harder to maintain and prone to breaking when modifications are made.

TypeScript addresses this problem by providing a clear and concise way to document the structure of the code. Let's revisit the previous example and add type annotations to the variables:

const radius: number = 5;
const area: number = calculateCircleArea(radius);
console.log(`The area of the circle is: ${area}`);

With TypeScript, we explicitly define the types of the radius and area variables. This self-documentation makes it easier for developers to understand how different components and modules interact. As a result, refactoring, debugging, and extending existing code becomes more straightforward and less error-prone.

Moreover, TypeScript enables seamless collaboration among frontend developers. With well-defined types, team members can communicate effectively, understand each other's code, and integrate their work seamlessly. This facilitates smoother teamwork and helps maintain consistency throughout the project.

Leveraging TypeScript's Robust Tooling and Ecosystem

TypeScript has a robust tooling ecosystem built around it, providing developers with powerful features for building frontend applications. The TypeScript compiler (tsc) offers static analysis, type checking, and transpilation capabilities. It ensures that the code adheres to the specified types and catches potential errors early in the development process. The TypeScript compiler also transpiles TypeScript code into efficient and optimized JavaScript for browser compatibility.

Furthermore, TypeScript integrates seamlessly with popular frontend frameworks and libraries like Angular, React, and Vue.js. Many of these frameworks have official TypeScript support, allowing developers to take advantage of TypeScript's advanced features and strong typing within their projects.

Some Examples

Example 1: Type Annotations and Type Inference

let name: string = "John";
let age: number = 25;
let isStudent: boolean = true;

function greet(name: string): void {
  console.log(`Hello, ${name}!`);
}

greet(name);

In this example, TypeScript's type annotations are used to explicitly define the types of variables (name, age, isStudent)and function parameters (name). This improves code clarity and enables the TypeScript compiler to catch type-related errors early.

Example 2: Object Shapes and Interfaces

interface Person {
  name: string;
  age: number;
}

function greetPerson(person: Person): void {
  console.log(`Hello, ${person.name}! You are ${person.age} years old.`);
}

const john: Person = {
  name: "John",
  age: 25,
};

greetPerson(john);

Here, TypeScript's interfaces define the shape of objects, ensuring that the personargument passed to the greetPersonfunction has the required properties (name and age). This improves code maintainability and avoids potential bugs caused by missing or incorrect object properties.

Example 3: Union Types

function displayResult(result: number | string): void {
  if (typeof result === "number") {
    console.log(`The result is a number: ${result}`);
  } else {
    console.log(`The result is a string: ${result}`);
  }
}

displayResult(42);
displayResult("Error");

TypeScript's union types allow variables or function parameters to accept multiple types. In this example, the resultparameter of the displayResultfunction can be either a number or a string. TypeScript's static type checking ensures that the appropriate operations are performed based on the actual type.

Example 4: Optional Properties

interface Person {
  name: string;
  age?: number;
}

function greetPerson(person: Person): void {
  console.log(`Hello, ${person.name}!`);
  if (person.age !== undefined) {
    console.log(`You are ${person.age} years old.`);
  }
}

const john: Person = {
  name: "John",
};

greetPerson(john);

TypeScript allows properties in interfaces to be marked as optional using the ? symbol. In this example, the ageproperty of the Personinterface is optional. This flexibility allows for more concise and flexible object structures without sacrificing type safety.

Example 5: Type Assertion

let value: any = "Hello, TypeScript!";
let length: number = (value as string).length;

console.log(`The length of the string is: ${length}`);

TypeScript's type assertion (also known as type casting) allows developers to override the inferred type of a variable and treat it as a different type. In this example, the valuevariable is initially of type any, but we assert that it should be treated as a string to access its lengthproperty. Type assertions provide more control and enable interoperability with existing JavaScript code.

Conclusion

In conclusion, TypeScript offers significant advantages over JavaScript in frontend development. With enhanced type safety, improved code maintainability and collaboration, a robust tooling ecosystem, and additional features like interfaces, union types, optional properties, and type assertions, TypeScript empowers developers to build more reliable, scalable, and maintainable frontend applications. By adopting TypeScript, developers can catch errors early, improve productivity, and deliver high-quality user experiences. Embrace TypeScript and unlock the full potential of frontend development!

Follow me on Twitter for more updates.

Easy explanation of Async/Await in JavaScript

Zeeshan Haider Shaheen — Fri, 07 Apr 2023 23:17:01 +0000

Asynchronous and synchronous programming are fundamental concepts in modern web development. In this blog post, we'll explore the differences between async and sync programming in JavaScript and TypeScript.

Synchronous Programming

Synchronous programming is the traditional way of writing code, where each operation is executed in sequence, blocking the execution of subsequent operations until the current one is completed. This means that if a function takes a long time to execute, the entire program will be held up until it finishes.

Here's an example of synchronous code:

function synchronousFunction() {
  console.log('Synchronous Function Start');
  for (let i = 0; i < 1000000000; i++) {
    // do something that takes a long time
  }
  console.log('Synchronous Function End');
}

console.log('Start');
synchronousFunction();
console.log('End');

When you run this code, you'll see that the program logs "Start", then "Synchronous Function Start", then takes a long time to execute the loop in synchronousFunction(), then logs Synchronous Function End, and finally logs "End".

Asynchronous Programming

Asynchronous programming is a newer way of writing code that allows multiple operations to be executed concurrently, without blocking the execution of subsequent operations. This is achieved by using callbacks, promises, or async/await syntax.

Here's an example of asynchronous code using callbacks:

function asynchronousFunction(callback) {
  console.log('Asynchronous Function Start');
  setTimeout(() => {
    callback();
  }, 3000);
}

console.log('Start');
asynchronousFunction(() => {
  console.log('Asynchronous Function End');
});
console.log('End');

When you run this code, you'll see that the program logs "Start", then "Asynchronous Function Start", then immediately logs "End", and finally logs "Asynchronous Function End" after a delay of 3 seconds.

In this example, we use the setTimeout() function to simulate a long-running operation, and we pass a callback function to asynchronousFunction() to be executed when the operation is complete.

Async and Await

Async/await is a newer syntax for writing asynchronous code in JavaScript and TypeScript. It allows you to write asynchronous code in a synchronous style, making it easier to read and understand.

Here's an example of async/await code:

function delay(ms: number): Promise<void> {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function asynchronousFunction() {
  console.log('Asynchronous Function Start');
  await delay(3000);
  console.log('Asynchronous Function End');
}

console.log('Start');
asynchronousFunction();
console.log('End');

When you run this TypeScript code, you'll see that the program logs "Start", then "Asynchronous Function Start", then immediately logs "End", and finally logs "Asynchronous Function End" after a delay of 3 seconds.

In this example, we define a delay() function that returns a promise that resolves after a given number of milliseconds. We then define an async function that logs a message, awaits the completion of the delay() function, and then logs another message.

Conclusion

Asynchronous programming is essential for building scalable, responsive, and high-performance web applications. By using async/await or other async patterns, you can write code that executes concurrently and doesn't block the execution of subsequent operations. With TypeScript, you can even benefit from static type checking and other language features to write more robust and maintainable code. So, whether you're building a small website or a large-scale web application, understanding async and sync programming is crucial to your success.

Beginner's Guide to Storybook

Zeeshan Haider Shaheen — Sun, 02 Apr 2023 22:46:45 +0000

Storybook is an open-source tool that helps developers build, test, and showcase their components in isolation from the rest of the application. It provides a user interface that allows you to interactively develop and test your components. In this blog post, we'll give you a beginner's guide to Storybook and show you how to use it to develop your components.

Why Use Storybook?

Storybook is an excellent tool for developing and testing components because it allows you to work on them in isolation from the rest of your application. This means you can develop your components without worrying about how they will interact with other components or features in your app. It also means that you can test your components in a controlled environment, making it easier to find and fix bugs.

Getting Started with Storybook

To get started with Storybook, you'll need to install it as a dependency in your project. You can do this by running the following command in your terminal:

npm install @storybook/react --save-dev

Once you've installed Storybook, you'll need to configure it to work with your project. You can do this by creating a configuration file in your project's root directory called .storybook/main.js. In this file, you'll need to specify the location of your stories and any addons you want to use. Here's an example configuration file:

module.exports = {
  stories: ['../src/components/**/*.stories.js'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
};

In this configuration file, we're specifying that our stories are located in the src/components directory and that they have a .stories.js file extension. We're also adding two addons: @storybook/addon-actions and @storybook/addon-links.

Creating Stories
Once you've configured Storybook, you can start creating stories for your components. A story is a visual representation of your component in a specific state or with specific inputs. To create a story, you'll need to create a new file in your project with the .stories.js file extension. Here's an example story for a Button component:

import React from 'react';
import { action } from '@storybook/addon-actions';

import Button from './Button';

export default {
  title: 'Button',
  component: Button,
};

export const Text = () => <Button onClick={action('clicked')}>Hello, Button</Button>;

export const Emoji = () => (
  <Button onClick={action('clicked')}>
    <span role="img" aria-label="so cool">
      😀 😎 👍 💯
    </span>
  </Button>
);

In this story, we're creating two versions of our Button component: one with text and one with emojis. We're also using the @storybook/addon-actions addon to log when the button is clicked.

Viewing Stories

To view your stories, you'll need to start the Storybook server. You can do this by running the following command in your terminal:

npm run storybook

This will start the Storybook server and open it in your default web browser. From there, you can navigate to your component stories and interact with them.

Conclusion

In conclusion, Storybook is an excellent tool for developing and testing components. It allows you to work on your components in isolation from the rest of your application, making it easier

I got the Github Copilot access

Zeeshan Haider Shaheen — Thu, 04 Nov 2021 07:01:04 +0000

Recently I heard about GitHub Copilot and thought it would be amazing. I was right . I applied for the waiting list and got access recently. It is amazing experience so far.

What is GitHub Copilot?

GitHub Copilot is the newest tool developed by GitHub to autocomplete code. It uses OpenAI for this purpose.

Copilot generates smart code suggestions with context, such as docstrings, code comments, function names, or even file names. It works with multiple languages like Python, JavaScript, TypeScript, Ruby and Go as well as dozens of other languages because it’s “trained on billions of lines of public code,” per the Copilot website.

Features

Copilot’s main feature is its autocomplete function. When typing a function description or comments,Copilot completes the whole function. User just have to press tab key to use the complete code.

For Example

I am using copilot in a project and it is saving my time by giving me valid suggestions.
For example when writing my Action it gives me whole suggestion and the suggestion was 100% right because I was going to write the same code.

My Point of View

I think GitHub Copilot will change the way we code. It will make things lot easier for developers. It is a good asset for developers.

Understanding React Redux from Beginning

Zeeshan Haider Shaheen — Mon, 21 Jun 2021 07:41:57 +0000

I have found the best article to learn Redux with ReactJs

understanding Redux the worlds easiest guide to beginning Redux

Have a look

https://www.freecodecamp.org/news/understanding-redux-the-worlds-easiest-guide-to-beginning-redux-c695f45546f6/

DEV Community: Zeeshan Haider Shaheen

Stop Fighting URL State in React: Introducing react-zod-url-state

The Problem: URL State is Painful

The Solution: Declarative URL State

Key Features

🔒 Type Safety with Zod

🎯 Automatic Serialization

⚡ Debounced Updates

🔗 Share State Easily

🔄 Reset to Defaults

Framework Support

Real-World Use Cases

Getting Started

Why I Built This

Try It Out

The React interview mistake I made (and how you can avoid it) 😅

Everything You Need to Know About Docker

Introducing react-use-apifetcher: Simplify Your API Calls in React

Why react-use-apifetcher?

Features

Getting Started

Installation

Usage

Under the Hood

Conclusion

A guide to Data Binding in Angular

Various Ways to Leverage Angular Directives: An In-Depth Guide

React.js vs Angular: A Focus on Cleaner Code

Typescript vs JavaScript

Easy explanation of Async/Await in JavaScript

Beginner's Guide to Storybook

I got the Github Copilot access

What is GitHub Copilot?

Features

For Example

My Point of View

Understanding React Redux from Beginning

understanding Redux the worlds easiest guide to beginning Redux

Have a look

Why `react-use-apifetcher`?