DEV Community: Wahid

[Solved] Swift Compiler Error (Xcode): Method does not override any method from its superclass

Wahid — Thu, 20 Mar 2025 06:36:56 +0000

In the new Xcode 16, if you get the following error

Failed to build iOS app
Could not build the precompiled application for the device.
Swift Compiler Error (Xcode): Method does not override any method from its superclass
/Users/abid/.pub-cache/hosted/pub.dev/flutter_inappwebview_ios-1.0.13/ios/Classes/InAppWebView/InAppWebView.swift:1431:25

This video solves this problem

Method doesn't override any method from its superclass solution

Paste the following code in pubspec.yaml

dependency_overrides:
flutter_inappwebview_ios:
git:
url: https://github.com/andychucs/flutter_inappwebview
ref: master
path: flutter_inappwebview_ios

Understanding Data Structures & Algorithms for Beginners

Wahid — Thu, 13 Mar 2025 06:49:00 +0000

https://youtu.be/jZkGQIdOKM8?si=_n6dyztzQEihjvpL

sdsd

Wahid — Wed, 12 Mar 2025 21:41:37 +0000

Understanding Data Structures & Algorithms for Beginners

Wahid — Wed, 12 Mar 2025 21:40:17 +0000

How to Fixing GSAP ScrollTrigger Pin Issue in React

Wahid — Tue, 11 Mar 2025 16:19:41 +0000

When working with GSAP ScrollTrigger in React, you might encounter an issue where your pinned section disappears when scrolling from the top but works correctly when scrolling from the bottom. This issue usually happens due to improper cleanup or React's strict mode behavior.

Problem

The section disappears when scrolling down.
The pin works only when scrolling up.
The .pin-spacer div is created incorrectly, affecting layout.

Solution
To fix this, we need to properly structure our GSAP animation using gsap.context() and ensure the cleanup process is handled correctly.

*Step-by-Step Fix
*

Create a Separate Animation File

import gsap from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

export const useInspireAnimation = (sectionRef) => {
  if (!sectionRef.current) return;

  const ctx = gsap.context(() => {
    gsap.to(sectionRef.current, {
      scrollTrigger: {
        trigger: sectionRef.current,
        start: "top top",
        end: "+=100%",
        scrub: true,
        pin: true,
        markers: true, // Remove after debugging
      },
    });

    gsap.fromTo(
      sectionRef.current.querySelector("h1"),
      { opacity: 0, y: 50 },
      {
        opacity: 1,
        y: 0,
        duration: 1,
        ease: "power2.out",
        scrollTrigger: {
          trigger: sectionRef.current,
          start: "top 80%",
          end: "top 50%",
          scrub: true,
        },
      }
    );
  });

  return () => ctx.revert(); // Cleanup GSAP context when c

Implement in the Component

import { useEffect, useRef } from "react";
import { useInspireAnimation } from "./useInspireAnimation";

const InspiringSection = () => {
  const sectionRef = useRef(null);

  useEffect(() => {
    const cleanup = useInspireAnimation(sectionRef);
    return cleanup;
  }, []);

  return (
    <section
      ref={sectionRef}
      className="section-2 h-screen w-screen bg-gray-900 text-white flex items-center justify-center"
    >
      <h1 className="text-4xl font-bold">Section 2</h1>
    </section>
  );
};

export default InspiringSection;

Why This Works?

Ensures proper cleanup: Using ctx.revert() removes previous animations when the component unmounts.
Uses gsap.context(): Prevents unexpected behavior in React Strict Mode.
Prevents issues with pin-spacer: Ensures the pinning doesn't cause layout bugs.
Keeps the animation separate: Improves maintainability and readability.

Final Thoughts
Using this method, you can prevent your pinned section from disappearing while maintaining smooth scroll-based animations in GSAP. If you're still facing issues, try adding ScrollTrigger.refresh() after a small delay to ensure GSAP recalculates the layout correctly.

How to fix Invalid User Data in Login API Response

Wahid — Sat, 01 Feb 2025 21:36:21 +0000

Issue:
You are receiving an error: Invalid user data: undefined while logging in because the expected user and token data are nested under data in the API response.

Solution:
1.Inspect the API response:
The API returns a response with user and token inside data. Here's the structure:

{
  "status": "success",
  "message": "Login successful.",
  "data": {
    "user": { ... },
    "token": "eyJ..."
  }
}

2.Update handleSubmit in LoginPage.jsx:
Modify the code to access data.user and data.token:

const handleSubmit = async (e) => {
  e.preventDefault();
  setLoading(true);
  setError("");

  try {
    const response = await API.post("/login", formData);

    if (response.data?.data?.user && response.data?.data?.token) {
      const { token, user } = response.data.data; // Access user and token
      localStorage.setItem("token", token); // Save token to localStorage
      login(user); // Login with user data
    } else {
      throw new Error("User data or token is missing in response");
    }
  } catch (err) {
    setError(err.response?.data?.message || "Login failed");
  } finally {
    setLoading(false);
  }
};

3.Explanation:
The API response contains data.user and data.token.
Ensure you access them correctly using response.data.data.user and response.data.data.token.
Add error handling if user or token is missing.

Outcome:
This fix ensures that the user and token data are properly accessed and used for login, resolving the undefined error.

Introduction to Linked Lists in PHP: A Beginner's Guide

Wahid — Sun, 26 Jan 2025 10:54:23 +0000

Linked Lists are a fundamental data structure in computer science, where elements (called nodes) are connected sequentially through pointers. Unlike arrays, Linked Lists are dynamic, meaning they can grow or shrink in size without the need for resizing operations. In this tutorial, we'll cover the basics of implementing a Linked List in PHP.

Structure of a Linked List Node
Each node in a Linked List consists of two parts:

Data: The value stored in the node.
Next: A reference (pointer) to the next node.

Here’s an example implementation of a basic node in PHP:

class Node {
    public $data;
    public $next;

    public function __construct($data) {
        $this->data = $data;
        $this->next = null;
    }
}

Implementing a Simple Linked List
To manage the nodes, we create a LinkedList class that maintains the head of the list and provides methods to manipulate it.

Basic Operations
1. Add Node to the End
We add a node to the end of the list by iterating through the nodes until we reach the last one.

class LinkedList {
    private $head;

    public function __construct() {
        $this->head = null;
    }

    public function append($data) {
        $newNode = new Node($data);
        if ($this->head === null) {
            $this->head = $newNode;
        } else {
            $current = $this->head;
            while ($current->next !== null) {
                $current = $current->next;
            }
            $current->next = $newNode;
        }
    }
}

2. Display the List
We can traverse the list to print all the elements.

public function display() {
    $current = $this->head;
    while ($current !== null) {
        echo $current->data . " -> ";
        $current = $current->next;
    }
    echo "NULL\n";
}

3. Delete a Node
Deleting a node involves finding the node and updating the pointer of the previous node.

public function delete($data) {
    if ($this->head === null) {
        return;
    }

    if ($this->head->data === $data) {
        $this->head = $this->head->next;
        return;
    }

    $current = $this->head;
    while ($current->next !== null && $current->next->data !== $data) {
        $current = $current->next;
    }

    if ($current->next !== null) {
        $current->next = $current->next->next;
    }
}

Example Usage
Here’s how to use the Linked List implementation:

$linkedList = new LinkedList();
$linkedList->append(10);
$linkedList->append(20);
$linkedList->append(30);

echo "Initial List:\n";
$linkedList->display();

$linkedList->delete(20);
echo "After Deleting 20:\n";
$linkedList->display();

*Output:
*

Initial List:
10 -> 20 -> 30 -> NULL
After Deleting 20:
10 -> 30 -> NULL

Conclusion
Linked Lists are a powerful tool for dynamic data manipulation. While PHP has built-in array functions that often serve similar purposes, understanding Linked Lists is essential for grasping fundamental data structures and improving algorithmic thinking. This implementation provides a starting point for more advanced structures like Doubly Linked Lists and Circular Linked Lists.

How to fix TailwindCSS not working with Vite + React

Wahid — Fri, 27 Dec 2024 15:26:33 +0000

Tailwind CSS requires two key configuration files: tailwind.config.js and postcss.config.js. If you don't run npx tailwindcss init -p, these files won't be generated, which can cause issues with Tailwind not working correctly.

Missing tailwind.config.js: Without this file, Tailwind can't process your files or customize the framework.
Missing postcss.config.js: PostCSS won't be set up, causing Tailwind's utilities to not be compiled correctly.

Solution:
Run

npx tailwindcss init -p

to generate both files. This ensures proper configuration and PostCSS setup, allowing Tailwind to work as expected.

How to Fix the Target Class Does Not Exist Error in Laravel

Wahid — Mon, 09 Dec 2024 19:43:25 +0000

The Target Class Does Not Exist error often occurs when Laravel cannot locate the class being referenced, especially in cases involving dependency injection or service container bindings.

Common Causes:

Incorrect namespace in the controller or model file.
Service container binding is not properly registered.
Autoload cache is outdated.

Step-by-Step Solution:
1.Check the Class Namespace
Ensure the namespace in your file matches the folder structure.

// Example: app/Http/Controllers/UserController.php
namespace App\Http\Controllers;

class UserController {
    // ...
}

2.Update Composer Autoload
Run the following command to refresh the autoload cache:

composer dump-autoload

3.Verify Service Provider Bindings
If using the service container, ensure proper binding in a service provider:

// Example in AppServiceProvider.php
use App\Services\MyService;

public function register()
{
    $this->app->bind('MyService', function () {
        return new MyService();
    });
}

4.Check Dependency Injection Usage
Confirm that the injected class is available and correctly referenced:

// Example in Controller
use App\Services\MyService;

public function __construct(MyService $service)
{
    $this->service = $service;
}

Running Mailpit for SMTP and UI on MacOS

Wahid — Wed, 28 Aug 2024 16:32:16 +0000

Mailpit is a tool for handling fake email deliveries, useful during application development. This tutorial will guide you through setting up and running Mailpit on MacOS with SMTP and UI configuration.

Step 1: Install Mailpit
Download and install Mailpit from the official GitHub repository. Choose the appropriate binary for MacOS.

Step 2: Running Mailpit
To start Mailpit, use the following command:

mailpit --smtp 0.0.0.0:1025 --listen 0.0.0.0:8025

This command starts the SMTP server on port 1025 and the web UI on port 8025.

SMTP: 0.0.0.0:1025 handles email delivery.
UI: 0.0.0.0:8025 allows you to view sent emails.
If you encounter an error stating that the address is already in use, ensure no other service is running on the same port. You can use a different port if needed by adjusting the command.

Step 3: Configuring Laravel Mail Settings
In your Laravel .env file, configure the mail settings:

env

MAIL_MAILER=smtp
MAIL_HOST=127.0.0.1
MAIL_PORT=1025
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS="hello@example.com"
MAIL_FROM_NAME="${APP_NAME}"

This configuration directs Laravel to send emails through Mailpit's SMTP server.

Step 4: Testing Email Sending
When your application sends an email, you can view it in the Mailpit UI by navigating to:

http://localhost:8025
This will display all emails sent by your application.

Troubleshooting
Connection Refused: Ensure Mailpit is running on the correct port (1025 for SMTP).
Port Conflict: If you encounter a "bind: address already in use" error, change the port in the command or stop the conflicting service.
That's it! You've successfully set up Mailpit to handle and display fake email deliveries in your development environment.

How to Fix Session store not set on request Laravel 11?

Wahid — Mon, 26 Aug 2024 22:02:43 +0000

Add the following code in the bootstrap/app.php file:

use Illuminate\Session\Middleware\StartSession;
$middleware->append(StartSession::class);

This is because the way we register custom middleware has changed slightly compared to Laravel 10 and earlier versions.

Hope this helps, thank you!

How to fix auto import not working in a React, TypeScript project

Wahid — Thu, 01 Aug 2024 16:19:23 +0000

Make sure you have installed the "ES7+ React/Redux/React-Native snippets" extension in your VS Code.

Ensure its status is 'disable'.

Also, install the "TypeScript and JavaScript Language Features" extension.

Ensure its status is 'disable.'