Forem: Shafayet Hossain Yashfi

ATTENTION DEVS!! Your credentials are now on GitHub!!

Shafayet Hossain Yashfi — Thu, 27 Nov 2025 02:39:43 +0000

A worm called "Shai-Hulud: The Second Coming" is spreading through npm right now. Zapier, Postman, PostHog, ENS Domains, AsyncAPI. All infected between November 21-24, 2025.

The name comes from the giant sandworms in Dune. And just like those worms, this malware spreads fast and leaves destruction behind.

Attackers hacked package maintainer accounts and uploaded infected versions of the original packages. When you run npm install, the malicious code runs automatically. Before the installation even finishes. Before you notice anything.

The malware scans your system for secrets. API keys, GitHub tokens, npm credentials, AWS keys, SSH keys. Everything it finds gets uploaded to public GitHub repos with the description "Sha1-Hulud: The Second Coming."

It also installs a backdoor on your machine. The attackers can run commands on your system whenever they want, even after you think you've cleaned up. And if the malware can't steal your data? It wipes your entire home directory instead.

→ 700+ npm packages infected
→ 25,000+ GitHub repos now contain stolen credentials
→ 132 million monthly downloads affected
→ New stolen secrets appearing every 30 minutes

Check your package.json for:

→ @zapier/* packages
→ @postman/tunnel-agent
→ posthog-node
→ @ensdomains/* packages
→ @asyncapi/* packages

If you installed ANY of these between November 21-24:

Assume all credentials on that machine are stolen
Change everything: GitHub tokens, npm tokens, AWS keys, Azure tokens
Search GitHub for "Sha1-Hulud: The Second Coming" - your data might be there
Check your .github/workflows/ folder for files you didn't create
Use package versions from before November 21

This is why supply chain attacks work. You don't download malware. You trust a package manager. And attackers exploit exactly that trust.

THIS IS A COPY POST, I JUST WANTED TO LET YOU GUYS KNOW ABOUT THAT

Coding is easy... You just have to copy paste!!😊😊

Shafayet Hossain Yashfi — Tue, 10 Jun 2025 10:17:10 +0000

From Scratch to Sync: How I Built My Own Notepad App- Aurinote

Shafayet Hossain Yashfi — Wed, 07 May 2025 14:25:55 +0000

Aurinote is a note-taking app built specifically with developers and modern productivity needs in mind. This post breaks down the tech stack, features, challenges, and development insights behind the project.

👇 Why I Built Aurinote

Honestly, i don't even know. I just wanted to build something like Notepad we usually get with the Windows by default and i end up with that.😭

🛠️ The Stack

Here’s a quick overview of the technologies used:

Tech	Purpose
React + Vite	Frontend framework & fast dev server
TypeScript	Type safety and better DX
shadcn/ui + Tailwind CSS	UI and styling
Supabase	Auth, storage, and database backend
TipTap	Rich text editor
Highlight.js	Code block syntax highlighting
Tanstack Query	Data fetching and caching
Sonner	Toast notifications

🔐 Supabase Auth + RLS

User accounts are powered by Supabase Auth with email + password. Each user has a profile including name and avatar, stored in Supabase storage.

(user_id = auth.uid())

This ensures that each user can only read, update, or delete rows where the user_id matches their authenticated ID. It’s a small line, but a huge step for securing user data. Supabase also handles session persistence, so users stay logged in across visits.

Rich Text Editing with TipTap

TipTap gives the editing experience a major boost, allowing:

Headings, paragraphs, lists
Code blocks with syntax highlighting
Keyboard shortcuts for formatting
Copy-paste support

All note data is stored in HTML format, giving flexibility in rendering.

Avatar Uploads + Compression

Users can upload a custom avatar, which is compressed client-side using a canvas API before uploading to Supabase Storage. This helps reduce storage size and improve loading performance.

Note Management

Notes are stored per-user and can be created, edited, and deleted from a dashboard view. The editor interface is simple and distraction-free, keeping the focus on writing.

Theming & UI

Built using Tailwind CSS and shadcn/ui, the interface is responsive, clean, and consistent across screen sizes. Features include:

Dark/light/Vibe/Ocean/Sunrise/Forest mode
Responsive design

App Structure Overview

While the codebase isn’t publicly available, here’s a quick look at how I structured the project internally for maintainability and scalability:

src/
  components/
  context/
  pages/
  services/
  types/
  hooks/

Context handles global auth and theme state
Hooks manage data fetching and session control
Services handle Supabase API interactions
Components include reusable UI building blocks

This modular structure helped keep the logic clean and organized, especially as features started to grow.

Challenges Faced

Authentication Refresh:
Keeping the app in sync after login/logout or profile updates was trickier than expected. Supabase session changes didn’t always propagate cleanly across components, so I implemented a global context and used a useEffect listener on onAuthStateChange to keep everything reactive.

Image Upload Optimization:
Raw uploads were slow and bulky. To reduce file sizes and improve UX, I compress images client-side using the HTML canvas API before sending them to Supabase Storage.

UI Sync & Cache Invalidation:
Some UI elements weren’t updating instantly after changes especially on note edits or theme toggles. I introduced conditional re-fetching and manual state updates in context to patch these sync delays.

Row-Level Security (RLS) Headaches:
Supabase's RLS is powerful, but even one wrong policy can block data or expose too much. Debugging policy logic while working with multiple users and shared notes was a bit of a minefield. Had to write precise rules and test thoroughly to avoid privilege leakage.

Supabase Rate Limits & Quotas:
When syncing notes across multiple sessions or devices rapidly (e.g., for real-time collab), I ran into some subtle Supabase request throttling. Caching responses locally and debouncing input saves helped reduce strain.

Responsive Design with State-Heavy UI:
Because of animations, theme toggles, and real-time syncing, managing layout shifts without UI jank (especially on mobile) was a major design+tech balancing act. I used Tailwind with media queries and conditional rendering to minimize unnecessary re-renders.

Features Completed

User registration & login
Profile management (avatar + name)
Create/edit/delete notes
Rich text editing
Syntax-highlighted code blocks
Responsive layout
Light/dark theme toggle
Keyboard shortcuts

Next Steps

Aurinote is still under development, but upcoming features might include:

Real-time collaborative editing
Offline mode
Exporting notes (PDF, Markdown)
Tagging and search functionality
Mobile-friendly PWA

Whatever,,,

Aurinote started as a side project, but it’s grown into something genuinely useful for everyday writing and note taking. If you’re a developer who wants a focused space to think, plan, or write—this might be a good fit🤷‍♂️

CHECK IT OUT

Github

Feel free to share feedback or ideas in the comments!!!

Never knew that Electron can give me PTSD

Shafayet Hossain Yashfi — Sat, 26 Apr 2025 05:03:01 +0000

If S.Q.L can be pronounced ''Sequel'' and ''My S.Q.L'' can be pronounced ''My Sequel'' then doesn't that mean that ''My S.Q.L 2.0'' should've be pronounced ''My sequel the Sequel''??

Shafayet Hossain Yashfi — Wed, 09 Apr 2025 10:22:40 +0000

Skibidi version of Dev Community??

Shafayet Hossain Yashfi — Wed, 02 Apr 2025 16:53:02 +0000

Ramadan Kareem guys!!

Shafayet Hossain Yashfi — Sat, 01 Mar 2025 13:34:51 +0000

I think Learning C++ makes me loose brain cells, or develop schizophrenia, or actually both

Shafayet Hossain Yashfi — Tue, 21 Jan 2025 15:27:21 +0000

Stuck on 'Reactivating terminal' in VS Code. Can't run my Python project! Tried restarting, checking Python path, and disabling extensions, but no luck. Using Win 10. Any ideas on how to fix this? 🙏

Shafayet Hossain Yashfi — Sun, 19 Jan 2025 11:14:17 +0000

Harnessing Functional Programming with JavaScript

Shafayet Hossain Yashfi — Sat, 11 Jan 2025 15:56:01 +0000

Design patterns are established solutions to frequent challenges in software design. By utilizing them, developers can enhance code readability, scalability, and maintainability. This article explores how TypeScript, an increasingly popular superset of JavaScript improves these patterns with its type safety and modern features. Whether you’re developing a large-scale application or a side project, grasping design patterns in TypeScript will boost your development skills.

What Are Design Patterns?

Design patterns are reusable, generic solutions to common challenges in software design. They aren't actual code but rather templates for addressing these issues. Originating from the "Gang of Four" (GoF) book, these patterns fall into three main categories:

Creational Patterns: Concerned with the mechanisms of object creation.
Structural Patterns: Emphasize the composition and organization of objects.
Behavioral Patterns: Focus on the interactions and communication between objects.

Why Use Design Patterns in TypeScript?

TypeScript’s features make implementing design patterns more robust:

1. Static Typing: Errors are caught at compile time, reducing runtime bugs.
2. Interfaces and Generics: Allow more precise and flexible implementations.
3. Enum and Union Types: Simplify certain patterns, such as state management.
4. Enhanced Tooling: With IDE support, TypeScript boosts productivity.

Some Key Design Patterns in TypeScript

1. Singleton Pattern

Ensures that a class has only one instance and provides a global point of access to it.

Implementation in TypeScript:

class Singleton {
  private static instance: Singleton;

  private constructor() {} // Prevent instantiation

  public static getInstance(): Singleton {
    if (!Singleton.instance) {
      Singleton.instance = new Singleton();
    }
    return Singleton.instance;
  }
}

const instance1 = Singleton.getInstance();
const instance2 = Singleton.getInstance();
console.log(instance1 === instance2); // true

Use Case: Managing configuration settings or database connections.

2. Factory Pattern

Provides an interface for creating objects without specifying their exact classes.

Implementation:

interface Button {
  render(): void;
}

class WindowsButton implements Button {
  render() {
    console.log("Rendering Windows button");
  }
}

class MacButton implements Button {
  render() {
    console.log("Rendering Mac button");
  }
}

class ButtonFactory {
  static createButton(os: string): Button {
    if (os === "Windows") return new WindowsButton();
    if (os === "Mac") return new MacButton();
    throw new Error("Unknown OS");
  }
}

const button = ButtonFactory.createButton("Mac");
button.render(); // Output: Rendering Mac button

Use Case: UI frameworks for cross-platform applications.

3. Observer Pattern

Defines a one-to-many relationship, where changes in one object are notified to all its dependents.

Implementation:

class Subject {
  private observers: Array<() => void> = [];

  addObserver(observer: () => void) {
    this.observers.push(observer);
  }

  notifyObservers() {
    this.observers.forEach(observer => observer());
  }
}

const subject = new Subject();
subject.addObserver(() => console.log("Observer 1 notified!"));
subject.addObserver(() => console.log("Observer 2 notified!"));
subject.notifyObservers();

Use Case: Reactivity in front-end frameworks like Angular or React.

4. Strategy Pattern

Defines a family of algorithms, encapsulates each, and makes them interchangeable.

Implementation:

interface PaymentStrategy {
  pay(amount: number): void;
}

class CreditCardPayment implements PaymentStrategy {
  pay(amount: number) {
    console.log(`Paid ${amount} using Credit Card`);
  }
}

class PayPalPayment implements PaymentStrategy {
  pay(amount: number) {
    console.log(`Paid ${amount} using PayPal`);
  }
}

class PaymentContext {
  constructor(private strategy: PaymentStrategy) {}

  executePayment(amount: number) {
    this.strategy.pay(amount);
  }
}

const payment = new PaymentContext(new PayPalPayment());
payment.executePayment(100); // Paid 100 using PayPal

Use Case: Payment systems in e-commerce platforms.

5. Decorator Pattern

Adds new functionality to an object dynamically.

Implementation:

class SimpleCoffee {
  cost(): number {
    return 5;
  }
}

class MilkDecorator {
  constructor(private coffee: SimpleCoffee) {}

  cost(): number {
    return this.coffee.cost() + 2;
  }
}

const coffee = new SimpleCoffee();
const milkCoffee = new MilkDecorator(coffee);
console.log(milkCoffee.cost()); // Output: 7

Use Case: Adding features to a product in a shopping cart.

Design Patterns Table

Pattern	Category	Use Case	Benefit
Singleton	Creational	Managing global state like configurations	Guarantees single instance
Factory	Creational	UI components or APIs	Decouples creation logic
Observer	Behavioral	Event systems in frameworks	Simplifies communication
Strategy	Behavioral	Algorithm selection in runtime	Enhances flexibility
Decorator	Structural	Extending class functionality	Adds dynamic capabilities

Best Practices for Implementing Design Patterns

1. Understand the Problem: Don't complicate things with unnecessary patterns.
2. Combine Patterns: Consider using combinations such as Singleton with Factory.
3. Leverage TypeScript Features: Utilize interfaces, generics, and enums to make implementation easier.
4. Write Tests: Ensure that the patterns function as intended.

Additional Resources

হাতে কলমে জাভাস্ক্রিপ্ট by Junayed Ahmed
Refactoring to Patterns by Joshua Kerievsky

See you in the next article, lad! 😊

My personal website: https://shafayet.zya.me

Bit windy, innit bruv?😇😇

Just think how many people you see on google maps are dead now...

Shafayet Hossain Yashfi — Thu, 09 Jan 2025 08:02:37 +0000

Reflections and Predictions, Analyzing the Challenges and Trends of 2025

Shafayet Hossain Yashfi — Sat, 04 Jan 2025 09:57:31 +0000

This is a submission for the 2025 New Year Writing challenge: Predicting 2025.

As we approach 2025, the technology landscape is set for significant transformations. The previous year established a foundation for innovation, but the upcoming year is expected to push the limits of what we can achieve. With progress in AI and the widespread accessibility of technology, let’s take a look at the trends, challenges, and breakthroughs that are likely to make headlines in 2025. (I guess...)

AI Leading the Way in Transformation

Artificial Intelligence is still at the forefront of innovation. In 2025, generative AI is anticipated to progress beyond content creation, influencing fields like healthcare, legal services, and personalized education. Medical diagnostics powered by AI will become more precise and widely available, with tools that analyze patient data in real time to propose individualized treatment options.
Predicted Impact:

AI powered legal assistants will revolutionize the legal industry, enabling small firms to tackle large-scale cases.
Generative AI in education will craft personalized learning plans, bridging knowledge gaps at an unprecedented scale.

However, ethical concerns will continue to be a top priority. Companies must tackle data privacy issues and biases in AI systems to keep the public's trust.

The Rise of Quantum Computing

In 2025, we can expect major advancements in quantum computing. Companies, both large and small, are in a fierce competition to tap into its possibilities, with applications that range from improving supply chains to tackling complex scientific issues.

What to Expect:

Breakthroughs in quantum cryptography will redefine cybersecurity.
Pharmaceutical companies will leverage quantum simulations to accelerate drug discovery.

While quantum computing holds great potential, its widespread adoption will encounter challenges, such as the requirement for specialized infrastructure and expertise.

Web3 and the New Internet Economy

Decentralized technologies are set to gain even more momentum in 2025. Web3 aims to create a more equitable, user-focused internet, with blockchain serving as its foundation.

Predicted Innovations:

Decentralized finance (DeFi) platforms will introduce novel financial products, empowering users in underbanked regions.
NFTs will evolve beyond art and collectibles, finding use cases in identity verification and intellectual property rights management.

Regulatory challenges will significantly influence the development of Web3. Governments around the globe will work to find a balance between fostering innovation and ensuring consumer protection.

Sustainability in Tech

Green technology will be at the forefront in 2025 as companies work to meet global sustainability objectives. With a focus on eco-friendly software development and energy efficient data centers, the tech industry will be essential in the fight against climate change.

Key Trends:

The rise of “green coding” methodologies will minimize the environmental impact of software development.
Renewable energy-powered cloud services will become the industry standard.

Sustainability will become essential rather than optional, shaping the choices of consumers and the decisions of investors.

The Human Element in Tech

While technical skills will still be important, the year 2025 will highlight the significance of human centric skills. The tech workforce of the future will be characterized by effective communication, adaptability, and ethical decision-making.

Shifts in Work Culture:

Remote work will solidify its place, with asynchronous collaboration tools becoming more sophisticated.
Companies will prioritize mental health initiatives, acknowledging the challenges of a distributed workforce.

Soft skills will set developers apart as they navigate a world that is becoming more complex and interconnected.

Challenges to Watch

Every innovation comes with its challenges. In 2025, we can anticipate the following difficulties:

Cybersecurity Threats: As systems become more interconnected, the potential for large-scale cyberattacks will increase.
Digital Divide: Despite technological progress, ensuring equitable access remains a challenge.
AI Regulation: Governments will grapple with creating frameworks that promote innovation while protecting society.

A Vision of the Future

2025 is set to be a year filled with both breakthroughs and self-reflection. As developers, innovators, and thinkers, we have the chance to influence the direction of technology. Whether we are exploring new frontiers or tackling the challenges that come our way, the upcoming year holds great potential for growth and transformation.

Make sure to check out this article, as it details the viral moments and major trends that shaped the IT sector in 2024. From advancements in AI to surprising tech innovations, it offers a captivating look at the year's most important stories. It's perfect for anyone wanting to stay informed about what made an impact in the industry!!!

Shafayet Hossain Yashfi

Dec 31 '24

The Viral Moments and Trends That Rocked IT Sector in 2024

#discuss #webdev

Comments 3

8 min read

My personal website: https://shafayet.zya.me