Forem: Hashir Khan

I Built a Chrome Extension That Turns Any Website Into Clean, Usable Code

Hashir Khan — Sun, 22 Feb 2026 16:49:26 +0000

As frontend developers, we spend a surprising amount of time doing one repetitive task:

Inspecting elements.
Digging through deeply nested DOM structures.
Copying incomplete or messy styles.

It’s slow. It’s frustrating. And it breaks the flow.

So I built a tool to fix it.

Introducing: HTML Element Picker

HTML Element Picker is a Chrome extension designed to help developers instantly extract clean, usable code from any webpage.

Instead of manually inspecting and reconstructing UI components, you can now select any element and get everything you need — instantly.

What it does

With a single click, you can extract:

Clean, structured HTML
Computed CSS with intelligent filtering
Tailwind CSS classes generated automatically

No unnecessary noise. No redundant styles. Just production-ready output.

Why This Tool Matters

Most developer tools give you too much information.

This one focuses on giving you the right information.

It intelligently filters:

Default browser styles
Inherited noise
Irrelevant layout values

So what you get is actually usable in real projects.

Key Features

One-click element picking with real-time visual overlay
Smart CSS extraction with noise reduction
Automatic Tailwind CSS conversion
Multi-format output (HTML, CSS, Tailwind)
Clean, syntax-highlighted output
One-click copy for individual sections or full output

Built for Real Workflows

This extension isn’t just a concept — it’s designed around how developers actually work.

From architecture to UX, everything is optimized for speed and clarity:

Popup interface for quick control and preview
Content script for real-time DOM interaction
Efficient style processing engine

The goal is simple:
Reduce friction between inspection and implementation.

Privacy-First by Design

No data collection
No external API calls
Fully user-controlled interactions

Your workflow stays yours.

Real Value for Developers & Teams

Tools like this are not just about convenience — they directly impact productivity.

For:

Freelancers → faster delivery
Agencies → consistent code extraction
Product teams → rapid UI replication

Reducing repetitive work means more time spent building actual features.

What’s Next

This is just Version 1.

Planned improvements include:

Component detection
Framework-aware output (React, Vue)
Advanced Tailwind optimization
Export to reusable components

Get Access

I’m currently sharing the extension with developers and teams looking to streamline their workflows.

If you’re interested, reach out or connect — I’d be happy to share it.

Final Thought

We don’t need more tools that show everything.

We need tools that show exactly what matters.

If this sounds useful to you, I’d love to hear your thoughts.

Making Web Interfaces Feel Alive with Animejs

Hashir Khan — Fri, 20 Feb 2026 10:48:15 +0000

Most websites look good… but they feel static.
As frontend developers, we often focus on layout, colors, and responsiveness — but we ignore one powerful element: animation.
Recently, I started using**** Anime.js in my projects, and it completely changed how users interact with my UI.

Why Anime.js?

Simple yet powerful API
Works with CSS, SVG, and DOM
Timeline control for complex animations
Lightweight and fast

Real Use Cases:

Hero section animations
Scroll-triggered effects
Smooth UI transitions
Micro-interactions

Key Insight:

Users don’t just see your UI — they feel it.

Adding motion brings life to your interface and improves user engagement significantly.

If you're building modern web apps, Anime.js is definitely worth exploring.

👉 https://animejs.com/

What animation library do you prefer — Anime.js or GSAP?

Boost Your Productivity with a Smart Time-Tracking Chrome Extension

Hashir Khan — Thu, 05 Feb 2026 11:02:26 +0000

Staying focused online is harder than ever. With endless tabs, social media notifications, and tempting websites, it’s easy to lose track of time. That’s why I built a practical time-tracking Chrome extension designed for real users, not just as a proof-of-concept.

Here’s what it does:

Tracks time spent on every website
Identifies distractions and unproductive habits
Blocks websites that waste your time
Limits access to specific websites for better focus
Built entirely in JavaScript as a real-world, usable application

This project is perfect for anyone looking to understand their browsing habits, reduce distractions, and boost productivity without relying on generic solutions.

I designed it with practicality in mind, ensuring that it actually helps real users improve their workflow rather than just being a technical demo.

Try it out and see it in action: Watch the YouTube Demo
Check out the code or contribute: GitHub Link

Chrome extension tracked on your own websites, so you can spend time

Hashir Khan — Fri, 30 Jan 2026 15:27:04 +0000

I tracked my own distractions… and it made me realize how much time gets lost during daily browsing.

So instead of ignoring the problem, I built a solution.

I recently developed a Smart Productivity Assistant Chrome Extension using Manifest V3 and modern extension architecture. This was not just another practice project, but a productivity tool designed around real user problems.

The extension helps users:

• Automatically track time spent on websites
• Run smoothly in the background using Chrome Service Workers
• Display clear and simple usage analytics in a popup dashboard
• Block distracting websites to improve focus
• Work completely offline using privacy-focused local storage with no tracking or external servers

While developing this project, I focused on building production-ready architecture rather than just writing functional code.

Development priorities included:

• Clean and scalable project structure
• Proper separation of concerns between background, popup, content scripts, and options
• Following Manifest V3 best practices
• Using minimal and optimized permissions
• Writing developer-friendly and client-ready code

This project significantly strengthened my understanding of:

• Chrome Extension APIs in real-world applications
• Background Service Workers and Content Script communication
• Event-driven software design
• Product-focused development thinking

The objective was simple: build something practical, secure, and scalable that users could genuinely benefit from, not just a portfolio demonstration.

This is the first version, and I am looking forward to improving it further and building more real-world solutions.

I would appreciate feedback from developers, productivity enthusiasts, and Chrome extension users.

Do productivity tools genuinely help improve focus, or do they sometimes become distractions themselves?

Building a Modern Real Estate Website Demo with Next.js, TypeScript & GSAP

Hashir Khan — Sat, 03 Jan 2026 13:34:19 +0000

Building a real estate website means much more than just showing houses. For example, in the Real Estate – Single Demo project, the following are some aspects to take into consideration:
In this blog post, I will guide you through the process based on the Real Estate – Single Demo project.

Project Overview

This is basically an example of how a single-page real estate website demo might look while being able to feature properties, scroll, and organize correctly, just as it would on an actual working real estate service.

"The primary objective was to create something that incorporates the feeling of:"

Fast
Visually premium
Smooth in interaction
Scalable in structure

Tech Stack

Next.js – App routing and performance optimization
TypeScript - Type safety and improved developer experience
Tailwind CSS: Utility styling for quick UI development
GSAP - Scroll animations
Lenis - Smooth Scrolling

Key Features

Real estate one-page design with a contemporary hero section GSAP ScrollTrigger Animation for sections and property cards “Lenis.”
Smooth scrolling for a fluid experience
Animations in pre-loader for better impression creation during page load
Fully responsive design, mobile-first - Scalable components with reusability capabilities

Why GSAP & Lenis?

In real estate website development, subtle motion plays a big role in perceived quality.
GSAP controls the animation without hurting performance.
Lenis gives natural, fluid scrolling without feeling heavy which creates a good UX.
Combined, they provide a sleek experience that is professional, not over-animated.

Designed Approach:
In developing this demo, I focused on:

A clear visual hierarchy can be created with Premium-feeling spacing and typography
Animations that complement, rather than compromise, the content. Performance-first approach
Real estate websites often serve business purposes, so clarity and usability always come first.

What This Demo Represents
This demo isn't just a UI experiment; it's actually how I would do things in real-world frontend projects:

Build with scalability in mind. Performance above all, UX too.
Keep code clean and maintainable.

🔗 Visit the Project
👉 Live Demo:Please click here
👉 GitHub Repository: Click here

Final Thoughts:
This Real Estate Single Demo is a small but concentrated project to demonstrate how modern frontend tools could be combined in the development of business-ready web experiences. If you're building in the real estate space, or any content-heavy platform for that matter, smooth interactions and performance make all the difference.

Creative Design Agency Portfolio React, GSAP Animation

Hashir Khan — Tue, 23 Dec 2025 15:15:11 +0000

This Website is a high-end creative agency website crafted to showcase modern web design, cinematic motion, and smooth user interactions.
Built with a strong focus on bold typography, GSAP-powered animations, and a refined Soft Sage & Obsidian color palette, this project blends technical precision with creative storytelling to deliver a premium browsing experience.

Key Features

Advanced GSAP Animations:
Parallax motion, staggered text reveals, and smooth clip-path transitions for a cinematic feel.

Liquid “Gooey” Buttons:
Custom SVG filter-based interactive buttons with fluid motion effects.

Lenis Smooth Scrolling:
High-performance inertial scrolling for a seamless, premium user experience.

Fully Responsive Design:
Optimized for all screen sizes — from mobile devices to ultra-wide 4K displays.

Dynamic Project Modals:
Immersive modal views with detailed portfolio presentations.

Tech Stack

Frontend: React
Animations: GSAP (GreenSock) & ScrollTrigger
Styling: Tailwind CSS
Icons: Lucide React
Fonts: Anton (Headings) & Inter (Body)

Languages & Tools

React.js
Tailwind CSS
GSAP Animations
CSS3

👉 Press here to view the live project: https://quantumstack-fawn.vercel.app/
👉 Github Repo: https://github.com/hashirwebx/software-webiste-in-gsap

👉 I’d really appreciate your feedback and suggestions
What do you think about this design?

Modern School / Education Website using React, TailwindCSS, GSAP

Hashir Khan — Tue, 16 Dec 2025 08:30:32 +0000

Project Overview

School-website-react is a modern React-based frontend template designed for educational platforms, prioritizing speed, scalability, and maintainability. It leverages Vite for rapid builds, Tailwind CSS for streamlined styling, and a modular component architecture to facilitate scalable development.

Project purpose and Key Features:
This project aims to deliver a fast, responsive, and easy-to-maintain frontend foundation for school websites. The core features include:

- Fast Development: Utilizes Vite with React for quick builds and hot module replacement, enhancing developer productivity.

- Tailwind CSS Integration: Simplifies styling with a configured CSS setup, enabling consistent and responsive design.

- Modular Components: Offers a structured, component-driven architecture for scalable UI development.

- Responsive & Interactive UI: Features animated navigation and adaptable layouts for seamless user experiences.

- Clear Project Structure: Organized setup with dedicated pages and components for easy maintenance and extension.

- Optimized Tooling: Uses modern development tools to keep the code clean, fast, and high-performance.

👉 Visit this link: https://school-website-react-ashen.vercel.app/

👉 You can check out the full project code here: https://github.com/Hashir15432/school-website-reacte

I’d really appreciate your feedback, suggestions, or stars ⭐ on GitHub!

WhatsApp Subscriptions Management Control webiste

Hashir Khan — Thu, 27 Nov 2025 10:57:39 +0000

Just wrapped up a new project!

I recently completed the 'Landing Page and Sign-In Page' for 'SubTrack', a smart platform that helps users manage all their subscriptions right inside WhatsApp.

Built this from scratch using 'React.js, JavaScript, and Tailwind CSS', focusing on a modern, responsive, and minimal UI that feels smooth and intuitive.

Some of the things I worked on:

Glass-style visual effects
Clean, component-based layout
Responsive design for all devices

Really proud of how this one turned out, every section feels polished and purposeful.
Always fun seeing design and code come together like this!

👉 Visit this link: https://subscriptionmanament-11.netlify.app/

👉 Github Repo: https://github.com/Hashir15432/whatsapp-submanage-landingPage

and give me your feedback. I’d love to hear your thoughts!**

Learn Algorithms in js

Hashir Khan — Mon, 03 Nov 2025 12:54:16 +0000

Welcome to the Algorithms in JavaScript learning!

Algorithms are the soul of problem-solving in computer science. Whether you're tackling coding interviews, building complex applications, or exploring the depths of programming logic, mastering algorithms is your key to writing efficient and elegant solutions.

Understanding algorithms helps you:

Solve problems faster and smarter

Optimize apps for real-world performance

Build a strong foundation for system design

Boost your confidence in technical interviews

Remember, learning algorithms is not about memorizing every line, it’s about understanding the logic, patterns, and trade-offs behind each solution.

“An algorithm must be seen to be believed.”

Keep practicing, break problems into smaller parts, and always focus on improving, one step at a time.

drop the GitHub repo URL here Click here

About the Repo:

This repository contains the implementation of algorithms categorized by type. Each algorithm file includes:

Problem Description
Time and Space Complexity
JavaScript Implementation
Sample Input/Output

Algorithms Covered:

Searching Algorithms

Linear Search
Binary Search
Interpolation Search

Sorting Algorithms:

Bubble Sort
Selection Sort
Insertion Sort
Merge Sort
Quick Sort
Heap Sort

Recursion and Divide & Conquer:

Tower of Hanoi
Fibonacci Sequence
Binary Search (recursive)

Dynamic Programming:

Climbing Stairs
Longest Common Subsequence

Graph Algorithms:

Breadth-First Search (BFS)
Depth-First Search (DFS)
Dijkstra’s Algorithm

More algorithms will be added regularly.

learn-data-structures-js

Hashir Khan — Mon, 03 Nov 2025 12:12:04 +0000

Welcome to the Learn Data Structures!

This project contains implementations of essential data structures with explanations, code samples, and usage examples. Perfect for interview prep, education, or brushing up on your programming fundamentals.

Data Structures are the building blocks of efficient software. Whether you're designing a high-performance application, preparing for coding interviews, or simply sharpening your problem-solving skills, mastering data structures is essential.

Understanding how and when to use each structure can greatly improve:

The efficiency of your code

The scalability of your applications

Your confidence in handling complex problems

Your readiness for technical interviews

Learning data structures isn’t just about memorizing how they work, it’s about understanding their trade-offs, real-world applications, and performance impacts.

“Programming isn't about what you know; it's about what you can figure out.”

Keep coding, stay curious, and remember:

The more deeply you understand the foundations, the more powerful your creations will be.

Just drop the GitHub repo URL here Click here

About the Repo

This repository contains clean, commented, and beginner-friendly implementations of popular data structures. Each structure includes:

Definition
Real-world applications
Time & Space complexities
Simple code implementation
Example usage

Languages Used

Currently implemented in:

JavaScript (ES6+)

Future support for Python, Java, or C++ is possible.

Data Structures Covered

Linear Data Structures:

Array
Linked List (Singly/Doubly/Circular)
Stack
Queue (Simple/Priority/Circular)

Non-Linear Data Structures:

Tree (Binary Tree, Binary Search Tree, AVL Tree, etc.)
Graph (Directed/Undirected, Matrix/List)

Hash-based:

Hash Table / Hash Map

Advanced:

Heap
Tries
Disjoint Set (Union-Find)

Each structure is stored in its own folder with explanations and code.

Building Reusable React Card Components with Styled Components

Hashir Khan — Thu, 09 Oct 2025 14:52:50 +0000

Introduction

In this project, I built a React-based Cards Landing Page using Styled Components, showcasing how to design modular, reusable, and visually appealing card components.

Technologies Used

This project was built using:

React - for component-based UI development
Styled Components - for modular CSS-in-JS styling
JavaScript (ES6+) - to handle functionality and props

What I Built

The app features:

Reusable Card Components – Each card is built with a styled component, making it easy to reuse across different parts of the application.
Custom Styling – Each button has hover effects, shadows, and transitions for a polished look.
Responsive Layout – Cards are arranged to adjust smoothly for different screen sizes.

What I Learned

Through this project, I learned:

How to use Styled Components for scoped, maintainable CSS.
The power of props in styled components for dynamic styles (e.g., changing colors or themes).
Designing reusable UI patterns that can scale across projects.
Combining React + CSS-in-JS for modern frontend development.

Future Improvements

While the current version showcases clean and reusable card components, I plan to enhance it with:

More Card Variations – adding different card layouts (e.g., image cards, text-only cards, profile cards).
Advanced Responsiveness – optimizing the tablets, ultra-wide monitors, and small devices.
Interactive Hover States – adding more subtle animations for better user engagement.

Final Thoughts

This project was a great way to practice React, Styled Components, and responsive UI design. Building reusable card components not only strengthens frontend skills but also lays the foundation for scalable design systems.

- You can check out the full project code here: GitHub Repo

Thanks for reading! Let me know your thoughts or suggestions. How would you improve this landing page?

Building a Spotify Playlist Creator with React and the Spotify API

Hashir Khan — Thu, 09 Oct 2025 14:31:26 +0000

Introduction

Hi DEV Community!
I recently built a project called Jammming Spotify, a React web app that connects with the Spotify API. It allows users to search for songs, create a custom playlist, and save it directly to their Spotify account.
This project was an amazing way to practice React, API integration, and modern frontend development while building something fun and useful.

What I Built

Jamming is a music web that lets you:

Log in with Spotify - Securely authenticate with Spotify.
Search Songs, Albums, or Artists – Enter a search term and view live results.
Display Results List - Shows a list of returned tracks from Spotify.
Add Songs to Playlist - Easily add songs with one click.
Remove Songs from Playlist - Keep the playlist clean by removing tracks.
Edit Playlist Title - Rename your playlist as you like.
Save Playlist to Spotify - Export your custom playlist directly to Spotify.

How I Made It

1. HTML & CSS

Designed the layout with a clean and modern look.
Styled sections for playlists, search results, and navigation.
Focused on responsive design for desktop and mobile users

2. JavaScript & React

Built the UI with modular React components.
Used state and props to manage playlist data and search results.
Connected to the Spotify Web API for search and playlist creation.
Implemented OAuth authentication to log in with Spotify.

What I Learned

Working on this project helped me:

Gain hands-on experience with API integration in React.
Understand state management and passing props between components.
Build a responsive and interactive UI with HTML, CSS, and React.
Handle authentication tokens and secure user login.
Improve my skills in building real-world applications.

Final Thoughts

Building Jammming was a fun challenge that combined React fundamentals, APIs, and real-world use cases. It showed me how frontend development can connect with powerful external services like Spotify.

- You can check out the full project code here: GitHub Repo

Thanks for reading! Let me know your feedback and suggestions to make this project even better.