Forem: Noor ul hassan

Building Free, High-Performance GSAP Components for the Community

Noor ul hassan — Wed, 11 Mar 2026 07:39:45 +0000

As developers, we’re surrounded by component libraries tailored to frameworks like React, Vue, and Angular. They’re great, but they often prioritize functionality over performance, interactivity, or visual flair. That’s why I’ve set out on a mission: to build unique, highly performant, and visually engaging components using GSAP—and provide them free for the community.

GSAP (GreenSock Animation Platform) is an incredibly powerful animation library, but surprisingly few developers leverage it for reusable UI components. My goal is to change that: to craft components that aren’t just visually impressive, but also optimized for real-world performance.

Why GSAP Components?

Performance-First: GSAP’s quickTo() and gsap.ticker allow near-zero per-frame overhead, keeping animations buttery smooth, even in complex UIs.
Unique Interactivity: Components can respond in rich, tactile ways—hover states, click states, magnetic effects, and more.
Framework-Agnostic: While many components are framework-specific, GSAP’s animation engine allows me to create truly reusable, high-performance elements.
Community-Focused: Every component will be open-source and free, ready to plug into your projects.

My First Component: A Custom Cursor

I kicked things off with a high-performance Custom Cursor. Instead of the default browser cursor, this component introduces a fluid, dual-element pointer—a small dot and a ring—that reacts dynamically to user interactions.

Key Features:

Performance-Optimized: Uses gsap.quickTo() for instant response without taxing the frame budget.
State Machine: Handles default, hover, click, hover-click, and hidden states.
Smart Delegation: A single document-level listener manages hover detection, avoiding dozens of individual event listeners.
Touch-Friendly: Automatically disables on touch devices.
Always Visible: Uses mix-blend-difference so the cursor stands out against any background.

You can try it live here: Custom Cursor Demo

Implementation Overview

Install Dependencies

npm install gsap tailwindcss

Create the Component

Place logic in components/ui/CustomCursor.tsx.
Disable the native cursor globally in CSS:

html { cursor: none !important; }

Use gsap.quickTo() for smooth motion and gsap.ticker to update the cursor position efficiently.

Use Globally

Import <CustomCursor /> in your root layout:

import CustomCursor from "@/components/ui/CustomCursor";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <CustomCursor />
        {children}
      </body>
    </html>
  );
}

Make Elements Interactive

Add data-cursor="hover" to trigger the hover state:

<button data-cursor="hover" className="px-6 py-2 bg-white text-black rounded-full">
  Hover Me
</button>

Performance Notes

Ref-based positioning: Mouse coordinates and GSAP quickTo functions are stored in refs to prevent unnecessary React re-renders.
GPU-Accelerated Animations: Using will-change: transform ensures smooth, hardware-accelerated movement.
Ticker Sync: GSAP ticker avoids conflicts with React render cycles, keeping animations fluid.

This is just the beginning. My plan is to build a library of free GSAP components that are not only visually stunning but also lightweight, interactive, and easy to integrate. From dynamic cursors to scroll-triggered animations and beyond, my goal is to give developers tools they won’t find anywhere else—without charging a cent.

If you’re curious or want to contribute, check out the first demo here: Custom Cursor Live

Stay tuned—more components are coming soon!

Why Do Clicks “Stack Up” When JavaScript Blocks the UI?

Noor ul hassan — Mon, 23 Feb 2026 06:19:15 +0000

I recently noticed something interesting while experimenting with JavaScript.

I wrote a simple synchronous loop that runs for about 10 seconds:

const start = Date.now();
while (Date.now() - start < 10000) {
  // Block for 10 seconds
}

During those 10 seconds, the UI completely freezes. That part makes sense.

But here’s the interesting part:

While the loop was running, I kept clicking a button on the page. Nothing happened. No console logs. No UI updates.

Then the loop finished…

And suddenly, all my clicks fired at once.

It felt like the browser had “saved” them somewhere.

So what’s actually happening?

The Short Answer: OS Input Buffering

When JavaScript runs a heavy synchronous task, the main thread (Call Stack) is blocked.

But JavaScript freezing does not mean your entire system freezes.

Let’s break it down:

1️ Hardware Level

When you click your mouse, the hardware sends an interrupt signal to the Operating System.

2️ OS Level

The OS records that click in its input buffer.
Even if your browser tab is busy, the OS is still fully operational.

3️ Browser Level

The browser receives those events from the OS and places them into the Macrotask Queue (also called the Callback Queue).

Why Do They Execute After the Loop?

The Event Loop cannot check the Macrotask Queue until the Call Stack is empty.

During the 10-second loop:

The Call Stack is busy.
The Event Loop is stuck.
It literally cannot move to the next “tick” to process events.

After the loop finishes:

The Call Stack clears.
The Event Loop runs again.
It sees all the queued click events.
It processes them one by one.

That’s why everything fires at once.

The Big Insight

JavaScript is single-threaded.

But your Operating System is not.

Even when your JavaScript is frozen, the OS is still collecting user input and handing it to the browser.

The browser politely queues those events until JavaScript is ready again.

Why This Matters

Understanding this helps explain:

Why heavy synchronous code freezes the UI
Why clicks seem to “stack up”
Why long-running tasks should be avoided on the main thread
Why Web Workers exist

It also makes the Event Loop feel less magical and more mechanical.

Sometimes weird UI behavior isn’t magic — it’s just how the system is designed.

Tailwind A11y Checker 🌊♿ — Stop shipping inaccessible UIs by accident

Noor ul hassan — Mon, 09 Feb 2026 14:40:09 +0000

Real talk: I used to think "accessibility" meant running Lighthouse before deploy. Then a user emailed me saying they couldn't read half my app because the contrast was garbage.

Turns out bg-blue-500 + text-blue-600 looks "clean" but fails WCAG hard. And I'd shipped that combo everywhere.

So I built Tailwind A11y Checker — a VS Code extension that catches these mistakes while you code:

What it actually does:

✅ Real-time contrast checks — Flags unreadable text combos and shows the exact WCAG ratio

✅ One-click fixes — Suggests the closest Tailwind shade that actually passes (no more guessing blue-700 vs blue-800)

✅ Focus state reminders — Yells at you if your button has no focus: classes (keyboard users will thank you)

Works everywhere:

.html • .jsx/.tsx • .vue • .svelte • .js/.ts

No setup. No config. Just install and your editor starts keeping you honest.

👉 Grab it: VS Code Marketplace

👉 Found a false positive? Open an issue — I'm actively tweaking the rules

👉 Using a custom color palette? Let me know — planning to add support

Built this because I kept failing basic a11y checks. Figured if it helps me, it might help you too.

Made with ❤️ by codewithnuh

Peeking Behind the Scenes: How Python Makes Your Code Come Alive!

Noor ul hassan — Sat, 29 Mar 2025 10:33:33 +0000

Python! You've probably heard it's super easy to read and use. But have you ever wondered what happens behind the scenes when you type in some Python code and hit run? It's actually a pretty cool process where Python works its magic to bring your program to life! Even when you run a simple program from the command line, there's a fascinating journey your code takes.

While Python is known as an "interpreted" language, meaning it runs your code line by line, there's a sneaky little intermediate step involved. This article will take you on a tour of how Python actually executes your code, shining a light on the roles of the interpreter, a kind of "secret code" called bytecode, and the Python Virtual Machine (PVM) – think of it as the stage where your code performs!

Meet the Python Interpreter: Your Code's Best Friend

When you type python your_script.py in your terminal, you're calling on the Python interpreter. Think of it as the 'official' guide that knows how to read, understand, and ultimately run your Python instructions. The most common version of this guide is called CPython, and it's written in a programming language called C. There are other versions out there, like Jython (for running Python on Java systems) and IronPython (for Windows systems), but for our adventure today, we'll stick with CPython, as it's the one you're most likely to bump into.

The interpreter's first job is to take a peek at your Python source code file (that's your your_script.py file). Now, unlike some other programming languages like C++ or Java that get translated directly into a language your computer's processor understands, Python takes a slightly different path.

Turning Your Code into a Secret Code: Bytecode!

Before your code actually runs, CPython does a quick translation. But it doesn't translate it into your computer's specific language. Instead, Python turns your original code into an intermediate code called bytecode.

Think of bytecode as a secret code that the Python interpreter understands. It's like a translator has already done some of the work, making it easier for the interpreter to follow your instructions. This "secret code" is also special because it can run on any computer that speaks Python!

This translation to bytecode happens automatically in the background. Have you ever seen files ending in .pyc in your Python projects? Those are the saved versions of this bytecode for your Python programs. Python creates them to make running the same program faster next time. If you haven't changed your code since the last run, Python can just load up the bytecode from the .pyc file and skip the translation step. Pretty neat, huh?

Sneak Peek at the Secret Code!

Python even lets you peek at this "secret code" using a tool called the dis module (short for disassembler). Let's say you have a simple function:

def add(a, b):
    return a + b

We can see its bytecode by doing this:

import dis

def add(a, b):
    return a + b

dis.dis(add)

When you run this, you'll see something like this (don't worry if the exact details look a little different on your computer):

  2           0 LOAD_FAST                0 (a)
              2 LOAD_FAST                1 (b)
              4 BINARY_ADD
              6 RETURN_VALUE

This might look a bit strange, but it's basically the low-level instructions that tell the Python interpreter to: grab the values of a and b, perform the addition, and then give back the result.

The Python Virtual Machine (PVM): Where the Magic Happens!

Once your code is in bytecode "secret code", the next important player steps onto the stage: the Python Virtual Machine, or PVM for short. Now, don't let the name "machine" confuse you – it's not a physical piece of hardware like your computer. Instead, the PVM is like a software program that pretends to be a computer, specifically designed to understand and run that bytecode.

The PVM's main job is to take those bytecode instructions and actually make them happen! It does this by following a simple process, kind of like a little dance:

Fetch: It grabs the next instruction from the bytecode.
Decode: It figures out what that instruction means.
Execute: It performs the action that the instruction tells it to do.

This "fetch-decode-execute" dance keeps going until all the bytecode instructions have been processed.

Let's Watch a Simple Program Run!

Let's follow along as Python runs a super simple program:

# hello.py
print("Hello, World!")

Here's what happens when you type python hello.py in your terminal:

Invocation: You tell Python to run your hello.py file.
Interpreter Startup: The CPython interpreter wakes up and gets ready.
Code Reading: The interpreter takes a look at your hello.py file.
Compilation to Bytecode: Python translates your print("Hello, World!") line into its "secret code". This code basically tells the PVM: "Hey, show the words 'Hello, World!' on the screen." This bytecode might be quickly stored in memory or maybe even saved in a hello.pyc file (depending on your settings and Python version).
PVM Execution: Now it's the PVM's turn!
- It reads the first instruction: "Load the words 'Hello, World!'".
- Then it reads the next instruction: "Call the print function".
- Finally, it acts on this instruction, telling your computer's operating system to display "Hello, World!" on your screen.
Program Termination: Once the PVM has followed all the instructions, it finishes its job, and the Python interpreter goes back to sleep.

A Quick Look at Memory: Where Does Everything Go?

Now, before we wrap up, let's touch on something else that's happening behind the scenes: how Python handles memory. Imagine Python has a big storage room (the heap) where it keeps all the "things" your program creates, like our "Hello, World!" string. Python is also tidy and has a "garbage collector" that automatically cleans up things that are no longer needed, so the storage room doesn't get too cluttered. One of the ways Python keeps track of what's being used is called reference counting.

Wrapping Up: Python's Behind-the-Scenes Magic

So, even running a simple Python program involves a neat process happening under the hood. The Python interpreter is like the director, first translating your code into a platform-friendly "secret code" called bytecode. Then, the Python Virtual Machine acts as the stage crew, diligently following those instructions to bring your program to life on your screen. Understanding this basic process gives you a cool peek into how Python works and can even help you when you're trying to figure out why your code might be doing something unexpected. While we looked at a very simple program, the same fundamental steps happen even with much more complex Python projects, showing just how clever and efficient Python is!

Advanced JavaScript Concepts Every Developer Should Know

Noor ul hassan — Tue, 24 Sep 2024 10:21:22 +0000

JavaScript is a language that many developers use daily, but there are numerous hidden gems within its ecosystem that even experienced developers may not be familiar with. This article explores some lesser-known JavaScript concepts that can significantly enhance your programming skills. We’ll cover concepts like Proxies, Symbols, Generators, and more, demonstrating each with examples and solving problems to illustrate their power.

By the end, you'll have a deeper understanding of JavaScript and know when (and when not) to use these advanced features.

1. Proxies

What are Proxies?

A Proxy in JavaScript allows you to intercept and customize fundamental operations like property lookups, assignments, and function invocations.

Problem: Imagine you're building a system where users have objects that track their actions. Instead of modifying every part of your app to track property access, you can use a Proxy to intercept and log these actions.

Example:

const user = {
  name: "Alice",
  age: 25
};

const handler = {
  get(target, prop) {
    console.log(`Property '${prop}' was accessed`);
    return prop in target ? target[prop] : `Property ${prop} doesn't exist`;
  },
};

const userProxy = new Proxy(user, handler);

console.log(userProxy.name); // Logs: Property 'name' was accessed, Returns: Alice
console.log(userProxy.address); // Logs: Property 'address' was accessed, Returns: Property address doesn't exist

Pros:

Allows you to handle and intercept almost any interaction with an object.
Great for logging, validation, and dynamic behavior.

Cons:

Can introduce performance overhead if overused.
Harder to debug due to the abstraction layer between your logic and object behavior.

2. Symbols

What are Symbols?

Symbols are a new primitive type introduced in ES6. They provide unique keys for object properties, making them useful when you need to avoid property name collisions.

Problem: Let’s say you’re working on an object that integrates with third-party code, and you want to add custom properties without overwriting their keys.

Example:

const uniqueId = Symbol('id');
const user = {
  [uniqueId]: 123,
  name: "Alice"
};

console.log(user[uniqueId]); // 123
console.log(Object.keys(user)); // ['name'] - Symbol key is hidden from iteration

Pros:

Symbols are unique, even if they share the same description.
Prevents accidental property overwrites, making them ideal for use in libraries or API design.

Cons:

Symbols are not enumerable, which can make debugging or iteration slightly trickier.
Can reduce code readability if overused.

3. Generator Functions

What are Generators?

Generators are functions that can be paused and resumed, making them useful for managing async flows or producing data on demand.

Problem: Suppose you want to generate a sequence of Fibonacci numbers. Instead of generating the entire sequence up front, you can create a generator that yields values one by one, allowing lazy evaluation.

Example:

function* fibonacci() {
  let a = 0, b = 1;
  while (true) {
    yield a;
    [a, b] = [b, a + b];
  }
}

const fib = fibonacci();

console.log(fib.next().value); // 0
console.log(fib.next().value); // 1
console.log(fib.next().value); // 1
console.log(fib.next().value); // 2

Pros:

Efficient for generating sequences where you only need a few values at a time.
Allows for cleaner async flows when used with yield.

Cons:

Not as commonly used as Promises or async/await, so they have a steeper learning curve.
Can lead to complex code if overused.

4. Tagged Template Literals

What are Tagged Template Literals?

Tagged templates allow you to process template literals with a function, making them incredibly powerful for building DSLs (domain-specific languages) like CSS-in-JS libraries.

Problem: You need to build a template system that processes user input and sanitizes it to avoid XSS attacks.

Example:

function safeHTML(strings, ...values) {
  return strings.reduce((acc, str, i) => acc + str + (values[i] ? escapeHTML(values[i]) : ''), '');
}

function escapeHTML(str) {
  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
}

const userInput = "<script>alert('XSS')</script>";
const output = safeHTML`User said: ${userInput}`;
console.log(output); // User said: &lt;script&gt;alert('XSS')&lt;/script&gt;

Pros:

Allows for fine control over string interpolation.
Great for building libraries that require string parsing or transformation (e.g., CSS, SQL queries).

Cons:

Not commonly needed unless working with specific libraries or creating your own.
Can be difficult to understand and debug for beginners.

5. WeakMaps and WeakSets

What are WeakMaps and WeakSets?

WeakMaps are collections of key-value pairs where the keys are weakly referenced. This means if no other references to the key exist, the entry is garbage collected.

Problem: You’re building a caching system, and you want to ensure that once objects are no longer needed, they are automatically garbage collected to free up memory.

Example:

let user = { name: "Alice" };
const weakCache = new WeakMap();

weakCache.set(user, "Cached data");

console.log(weakCache.get(user)); // Cached data

user = null; // The entry in weakCache will be garbage collected

Pros:

Automatic garbage collection of entries, preventing memory leaks.
Ideal for caching where object lifetimes are uncertain.

Cons:

WeakMaps are not enumerable, making them difficult to iterate over.
Limited to only objects as keys.

6. Currying

What is Currying?

Currying transforms a function that takes multiple arguments into a sequence of functions that each take a single argument. It’s a functional programming technique that can increase code flexibility.

Problem: Let’s say you have a function that applies a discount based on a percentage. You want to reuse this function with different percentages throughout your app.

Example:

const applyDiscount = (discount) => (price) => price - price * (discount / 100);

const tenPercentOff = applyDiscount(10);
const twentyPercentOff = applyDiscount(20);

console.log(tenPercentOff(100)); // 90
console.log(twentyPercentOff(100)); // 80

Pros:

Can make functions more reusable by pre-applying arguments.
Allows you to easily create partial applications.

Cons:

Not intuitive for developers unfamiliar with functional programming.
Can lead to overly complex code if used excessively.

Conclusion

Each of these advanced JavaScript concepts — Proxies, Symbols, Generators, Tagged Template Literals, WeakMaps, and Currying — offers unique capabilities to solve specific problems in more efficient, scalable, or elegant ways. However, they come with trade-offs, such as increased complexity or potential performance issues.

The key takeaway is to understand when and where to use these concepts. Just because they exist doesn’t mean you should use them in every project. Instead, incorporate them when they provide clear benefits, like improving code readability, performance, or flexibility.

By exploring these advanced techniques, you’ll be able to tackle more sophisticated problems and write more powerful JavaScript.

# Learning JavaScript: A Beginner's Guide

Noor ul hassan — Sat, 12 Aug 2023 13:09:00 +0000

JavaScript is a versatile and widely used programming language that powers the interactive and dynamic elements of websites. Whether you're looking to enhance your web development skills or dive into programming for the first time, learning JavaScript can be a rewarding journey. In this guide, we'll walk you through the steps to learn JavaScript effectively.

Getting Started

1. Set Up Your Environment

Before you begin, ensure you have a text editor for writing code. Popular choices include Visual Studio Code, Sublime Text, and Atom. You'll also need a web browser for testing your JavaScript code.

2. Understand the Basics

Start by grasping fundamental concepts like variables, data types (numbers, strings, booleans), and basic operations (arithmetic, concatenation). This foundation will help you understand more complex topics.

Core Concepts

3. Control Structures

Learn about control structures such as if statements, for loops, and while loops. These structures allow you to make decisions and repeat actions based on conditions.

4. Functions

Functions are blocks of code that can be reused. Master how to create, call, and pass parameters to functions. Understanding functions is crucial for building organized and efficient code.

5. Objects and Arrays

JavaScript objects and arrays are used to store and organize data. Explore how to create and manipulate objects and arrays to manage information effectively.

Deepening Your Knowledge

6. DOM Manipulation

The Document Object Model (DOM) allows you to interact with web pages. Learn how to use JavaScript to modify HTML and CSS, enabling dynamic and responsive web experiences.

7. Events and Event Handling

Understand how to detect and respond to user actions like clicks and keyboard input. Event handling is vital for creating interactive web applications.

8. Asynchronous JavaScript

Explore asynchronous programming with concepts like callbacks, promises, and async/await. This is crucial for handling tasks that don't need to happen in a specific order, like fetching data from a server.

Practical Projects

9. Build Simple Projects

Apply your knowledge by building small projects. Create interactive forms, a to-do list, or a basic calculator. Practical projects help solidify your understanding and boost your confidence.

10. Work on Real-world Projects

As you become more comfortable with JavaScript, take on more complex projects. Build a portfolio website, a weather app that fetches data, or a simple game. Real-world projects showcase your skills and provide tangible results.

Learning Resources

11. Online Tutorials and Courses

Numerous online platforms offer JavaScript tutorials and courses, catering to different learning styles. Check out resources like Codecademy, freeCodeCamp, and MDN Web Docs.

12. Books and Documentation

Books like "Eloquent JavaScript" by Marijn Haverbeke and the Mozilla Developer Network (MDN) JavaScript Guide provide in-depth explanations and examples.

13. Practice, Practice, Practice

Consistent practice is key. Work on coding challenges from websites like LeetCode and HackerRank to reinforce your skills.

Final Thoughts

Learning JavaScript can be a rewarding endeavor that opens up countless opportunities in web development. Approach your learning journey with patience, curiosity, and a willingness to tackle challenges. Remember that programming is a skill that improves over time, so keep coding and experimenting to become a proficient JavaScript developer.# Learning JavaScript: A Beginner's Guide

Getting Started

1. Set Up Your Environment

Before you begin, ensure you have a text editor for writing code. Popular choices include Visual Studio Code, Sublime Text, and Atom. You'll also need a web browser for testing your JavaScript code.

2. Understand the Basics

Core Concepts

3. Control Structures

Learn about control structures such as if statements, for loops, and while loops. These structures allow you to make decisions and repeat actions based on conditions.

4. Functions

Functions are blocks of code that can be reused. Master how to create, call, and pass parameters to functions. Understanding functions is crucial for building organized and efficient code.

5. Objects and Arrays

JavaScript objects and arrays are used to store and organize data. Explore how to create and manipulate objects and arrays to manage information effectively.

Deepening Your Knowledge

6. DOM Manipulation

The Document Object Model (DOM) allows you to interact with web pages. Learn how to use JavaScript to modify HTML and CSS, enabling dynamic and responsive web experiences.

7. Events and Event Handling

Understand how to detect and respond to user actions like clicks and keyboard input. Event handling is vital for creating interactive web applications.

8. Asynchronous JavaScript

Practical Projects

9. Build Simple Projects

Apply your knowledge by building small projects. Create interactive forms, a to-do list, or a basic calculator. Practical projects help solidify your understanding and boost your confidence.

10. Work on Real-world Projects

Learning Resources

11. Online Tutorials and Courses

Numerous online platforms offer JavaScript tutorials and courses, catering to different learning styles. Check out resources like Codecademy, freeCodeCamp, and MDN Web Docs.

12. Books and Documentation

Books like "Eloquent JavaScript" by Marijn Haverbeke and the Mozilla Developer Network (MDN) JavaScript Guide provide in-depth explanations and examples.

13. Practice, Practice, Practice

Consistent practice is key. Work on coding challenges from websites like LeetCode and HackerRank to reinforce your skills.