Forem: Nazmul Hossain

Sera UI - Modern React Component Library

Nazmul Hossain — Thu, 17 Jul 2025 23:14:40 +0000

Sera UI

⚠️ Note

Hello everyone, give it a ⭐ star — I will release this as open source on GitHub very soon!
Github Link

Beautifully designed components you can copy and paste into your apps. Accessible. Customizable. Open Source.

Sera UI is a reusable component library for React, Next.js, and other JSX-based libraries. Currently, we support React and Next.js only. Our goal is to create next-level UI with minimal code, optimal performance, and a modern feel.

💡 Why Sera UI?

“I’m a JavaScript library creator from Bangladesh, not a professional designer. But after building several front-end projects, I realized I needed my own UI system to streamline everything.”

Sera UI is born from real development needs — built by a developer, for developers.

✨ Features

🎨 Modern Design: Clean and beautiful UI components.
⚡ High Performance: Built with performance and accessibility in mind.
🧱 Easy to Customize: Easily themeable with Tailwind CSS.
🔄 Smooth Animations: Powered by the excellent framer-motion library.
🧩 Icons Included: lucide-react icons are integrated out of the box.

🚀 Getting Started

You can add Sera UI components to your project in two ways: using our CLI for a quick setup or by manually copying the component code for more control.

CLI Installation

Our CLI will guide you through the process of adding components to your project. Here is an example of how to add the Button component:

npm

npx shadcn@latest add "https://seraui.seraprogrammer.com/registry/button.json"

pnpm

pnpm dlx shadcn@latest add "https://seraui.seraprogrammer.com/registry/button.json"

yarn

yarn dlx shadcn@latest add "https://seraui.seraprogrammer.com/registry/button.json"

bun

bunx shadcn@latest add "https://seraui.seraprogrammer.com/registry/button.json"

Manual Installation

For manual installation, you can copy and paste the component code directly from our documentation into your project.

Choose a Component: Browse our component library and find what you need.
Copy the Code: You can view and copy the source code for each component.
Paste and Customize: Paste the code into your project and customize it to fit your needs.

🧩 Available Components

We are constantly growing our library of components. Here are some of the components currently available:

Accordion
Alert
Avatar
Badge
Button
Card
Checkbox
Dialog (Modal)
Input
Label
Select
Tabs
Textarea
Tooltip

...and more are on the way!

🎨 Theming

Sera UI is built on top of Tailwind CSS, making it incredibly easy to customize the look and feel to match your brand. You can customize colors, fonts, spacing, and more by simply modifying your tailwind.config.js file. The components are unstyled by default and will automatically adapt to your theme.

📜 License

Sera UI is an open-source project released under the MIT License. This means you are free to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the software.

💬 Community & Support

Have a question or want to get involved?

GitHub Discussions: The best place to ask questions, share ideas, and get help from the community.
Report an Issue: If you find a bug, please report it on our GitHub Issues page.

DevShowcase | Build Your Developer Portfolio Online in Minutes

Nazmul Hossain — Mon, 09 Jun 2025 15:13:36 +0000

Hey there, awesome coder 👋

We’d love to invite you to SeraProgrammer.com — a platform built to showcase amazing developers like you and connect you with top recruiters and global tech companies.

(DevShowcase )[https://seraprogrammer.com]

🎯 Why join? ✅ Stand out with your own dev profile

✅ Get discovered by hiring teams ✅ No fees, no fluff — just real opportunities

🆓 It’s 100% free to join! 👉 Claim your profile today and get noticed.

—

Cheers, The SeraProgrammer Team 💙

Motiono - A React Animation Library Powered by GSAP

Nazmul Hossain — Fri, 02 May 2025 03:17:22 +0000

Motiono - A React Animation Library Powered by GSAP

Motiono is a React library that simplifies creating smooth, interactive animations by leveraging GSAP (GreenSock Animation Platform). It provides a clean, declarative API for animating React components, giving developers the flexibility to animate built-in HTML elements and custom React components. With built-in GSAP integration, Motiono makes creating sophisticated animations easy without any external setup.

This documentation will guide you through the installation, basic usage, available tags, API references, advanced usage, performance tips, and troubleshooting.

Installation
Basic Usage
Available Tags
API Reference
- motiono Component
- motiono.setGsapDefaults
- GSAP Integration
Advanced Usage
Performance Considerations
Troubleshooting

Installation

You can install Motiono via npm:

npm install motiono

Basic Usage

Motiono makes it simple to animate HTML elements. Once installed, import motiono into your React components and animate tags like you would with any standard HTML element.

Example: Animate a Heading (`h1`)

import { motiono } from "motiono";

export default function App() {
  return (
    <>
      <motiono.h1
        from={{ scale: 0.3, y: -150, rotate: -15, opacity: 0 }}
        to={{ scale: 1, y: 0, rotate: 0, opacity: 1 }}
        transition={{
          type: "spring",
          stiffness: 700,
          damping: 10,
          mass: 1.5,
        }}
        style={{
          fontSize: "4rem",
          textAlign: "center",
          marginTop: "3rem",
          fontWeight: "bold",
        }}
      >
        Hello World
      </motiono.h1>
    </>
  );
}

In this example, the h1 element will animate from the defined from properties (small scale, offscreen, rotated) to the to properties (full scale, centered, no rotation). You can customize the animation using transition properties such as easing, stiffness, and damping.

Available Tags

Motiono supports a wide range of HTML tags that you can animate out of the box. These include:

Text Tags: motiono.h1, motiono.h2, motiono.h3, motiono.h4, motiono.h5, motiono.h6, motiono.p, motiono.span, motiono.a
Structural Tags: motiono.div, motiono.section, motiono.article, motiono.header, motiono.footer, motiono.nav, motiono.main, motiono.aside
Form Tags: motiono.input, motiono.textarea, motiono.select, motiono.option, motiono.label, motiono.fieldset, motiono.legend
Multimedia Tags: motiono.img, motiono.video, motiono.audio, motiono.canvas, motiono.iframe
List Tags: motiono.ul, motiono.ol, motiono.li, motiono.dl, motiono.dt, motiono.dd
Other Tags: motiono.blockquote, motiono.code, motiono.pre, motiono.em, motiono.strong, motiono.figure, motiono.figcaption, motiono.time, motiono.details, motiono.summary

API Reference

motiono Component

The motiono component is the main entry point for creating animations in Motiono. It provides a simple and declarative interface for animating various HTML elements.

Props

Prop	Type	Description
`tag`	`string` (default: `div`)	The HTML tag to animate (e.g., `div`, `span`, `h1`).
`from`	`Object`	The starting properties for the animation (e.g., `{ scale: 0.5, y: -200, opacity: 0 }`).
`to`	`Object`	The ending properties for the animation (e.g., `{ scale: 1, y: 0, opacity: 1 }`).
`fromTo`	`Array` (`[from, to]`)	An array of two objects, defining both starting and ending animation properties.
`children`	`React.ReactNode`	The content or child elements inside the animated component.
`className`	`string`	CSS class name to apply to the element.
`style`	`Object`	Inline CSS styles for the element.
`onComplete`	`Function`	Callback fired when the animation completes.
`onStart`	`Function`	Callback fired when the animation starts.
`onUpdate`	`Function`	Callback fired on each update during the animation.
`duration`	`number` (default: `1`)	Duration of the animation in seconds.
`delay`	`number`	Delay before the animation starts.
`paused`	`boolean` (default: `false`)	Whether the animation starts paused.
`repeat`	`number`	The number of times to repeat the animation.
`yoyo`	`boolean`	Whether the animation should reverse on repeat.
`yoyoEase`	`boolean	string
{% raw %}`ease`	`string	Function`
`immediateRender`	`boolean` (default: `false`)	Whether to render the element immediately or wait for the animation.
`stagger`	`number	Object`
`onTween`	`Function`	Callback that provides the tween instance for further manipulation.

Example:

<motiono.div
  from={{ opacity: 0 }}
  to={{ opacity: 1 }}
  duration={2}
  ease="easeOutQuad"
  onComplete={() => console.log("Animation Complete")}
>
  <p>This is an animated div!</p>
</motiono.div>

motiono.setGsapDefaults

This function allows you to set global GSAP animation defaults for all animations created via Motiono. You can apply settings like default easing and duration across your app without specifying them in every animation.

Usage:

motiono.setGsapDefaults({
  ease: "power2.out",
  duration: 2,
});

GSAP Integration

Motiono integrates GSAP by default. You do not need to import GSAP separately unless you want more advanced control. This gives you the ability to use GSAP's full power when needed, but you can still create smooth animations using the declarative syntax.

GSAP: Directly accessible for advanced animation logic.
useGSAP: A custom hook to apply GSAP animations directly within your React components.

Example with GSAP:

import { useGSAP  , gsap } from "motiono";

function App() {
  const ref = useRef(null);

  useGSAP(() => {
    gsap.to(ref.current, { x: 200, duration: 1 });
  });

  return <div ref={ref}>This element will move</div>;
}

Advanced Usage

Animation Chaining

You can chain animations using GSAP's timeline API for more complex sequences:

const tl = gsap.timeline();
tl.to(".box", { x: 100, duration: 1 });
tl.to(".box", { y: 100, duration: 1 });

Custom Easing Functions

Motiono supports custom easing functions through GSAP:

import { gsap } from "motiono";

gsap.to(".box", {
  x: 500,
  duration: 2,
  ease: "elastic.out(1, 0.75)",
});

Performance Considerations

To ensure good performance when using animations in a React app, keep the following points in mind:

Debounce re-renders: Motiono uses hooks like useMemo and useCallback to minimize unnecessary renders.
Limit simultaneous animations: Excessive simultaneous animations can degrade performance, so optimize accordingly.
Use requestAnimationFrame for smooth rendering: This is automatically handled by GSAP, but make sure you're not overwriting it in your animations.

Troubleshooting

Animation not triggering: Double-check the element's reference and ensure from and to properties are properly defined.
Unexpected results with stagger or yoyo: Inspect your configuration for conflicting animation properties.
Performance issues: Optimize animations by reducing the number of concurrent active animations or using gsap.timeline() for grouped animations.

Motiono simplifies animation workflows in React by providing a default GSAP integration and an intuitive API for developers to create beautiful, performance-optimized animations with ease.

🤷‍♀️ SeraJS is a lightweight, signal-based reactive JavaScript library

Nazmul Hossain — Sat, 26 Apr 2025 02:26:40 +0000

GitHub Link

📖 Introduction

SeraJS is a lightweight, signal-based reactive JavaScript library for
building dynamic user interfaces.

At just 1.25KB gzipped and only 135 lines of code, it's a remarkably lightweight reactive UI library — offering powerful reactivity with minimal overhead.

⚡️ SeraJS focuses on minimalism and performance without sacrificing
developer experience.

Bundle Size Comparison (Minified + Gzipped)

Library	Size (gzipped)	Build Step Required	Main Purpose	Key Features
SeraJS	1.25kb	Optional 😎	Reactive UI	135 lines of code, extremely lightweight
React	~40kb	Yes	UI components	Virtual DOM, component-based architecture, JSX
Vue	~33kb	Optional	Progressive framework	Reactive data binding, component system, single-file components
Solid.js	~7kb	Yes	Reactive UI	No virtual DOM, compiled templates, fine-grained reactivity
Alpine.js	~7.1kb	No	Lightweight framework	Minimal DOM manipulation, declarative syntax, works with existing HTML
Preact	~4kb	Yes	React alternative	API compatible with React, smaller size, faster performance
htmx	~14kb	No	AJAX enhancements	HTML attributes for AJAX, minimal JavaScript, server-side rendering friendly

⚙️ Core Concepts

🔄 Signal-Based Reactivity

SeraJS uses a signal-based reactive system, a modern approach to state
management that enables efficient updates:

🧠 Signals

Self-contained reactive values that notify subscribers when they change.
🌀 Effects

Functions that automatically re-execute when their dependencies (signals)

change.
🧭 Memo

A memoization helper similar to React's useMemo, used to cache the result

of a computation based on reactive dependencies to avoid unnecessary
recalculations.
🔬 Fine-Grained Updates

Only the specific DOM elements affected by state changes are updated,

resulting in minimal re-rendering and high performance.

💡 SeraJS is designed to be intuitive, fast, and easy to integrate into any
project — making it a perfect choice for modern frontend development.

Why SeraJS?

SeraJS brings together the best parts of libraries like React, Solid, and Lit — blending familiar patterns with a fresh, minimal approach.

At just 1.25KB gzipped and only 135 lines of code, this reactive UI library stays ultra-light while still delivering powerful reactivity.

Whether you want a build system or prefer a no-build workflow, SeraJS has you covered. It’s flexible enough to fit your dev style — use it how you want.

🌱 Sera.js Basic Example

A minimal example showing a Hello World message using Sera.js.

📄 App.jsx

import { h } from "serajs";

export default function App() {
  return (
    <h1>Hello world</h1>
  );
}

No Build, No Dependencies

<!DOCTYPE html>
<html>
  <head>
    <title>Sera js 😎</title>
  </head>
  <body>
    <script type="module">
      import { h, setSignal, setEffect } from "//unpkg.com/serajs";

      function Hello() {
        const [count, setCount] = setSignal(0);

        setEffect(() => {
          console.log(count());
        });

        return h(
          "div",
          null,
          h("h1", null, "Hello World!"),
          h("p", { style: { color: "red" } }, "Do you Like Serajs?"),
          h("h1", null, () => `Count: ${count()}`),
          h(
            "button",
            { onclick: () => setCount(count() + 1) },
            "Increase Count"
          )
        );
      }

      const root = document.body;
      root.appendChild(Hello());
    </script>
  </body>
</html>

1KB Frontend Library

Nazmul Hossain — Sat, 26 Apr 2025 01:53:38 +0000

📖 Introduction

GitHub Link

SeraJS is a lightweight, signal-based reactive JavaScript library for
building dynamic user interfaces.

At just 1.25KB gzipped and only 135 lines of code, it's a remarkably lightweight reactive UI library — offering powerful reactivity with minimal overhead.

⚡️ SeraJS focuses on minimalism and performance without sacrificing
developer experience.

⚙️ Core Concepts

🔄 Signal-Based Reactivity

SeraJS uses a signal-based reactive system, a modern approach to state
management that enables efficient updates:

🧠 Signals

Self-contained reactive values that notify subscribers when they change.
🌀 Effects

Functions that automatically re-execute when their dependencies (signals)

change.
🧭 Memo

A memoization helper similar to React's useMemo, used to cache the result

of a computation based on reactive dependencies to avoid unnecessary
recalculations.
🔬 Fine-Grained Updates

Only the specific DOM elements affected by state changes are updated,

resulting in minimal re-rendering and high performance.

💡 SeraJS is designed to be intuitive, fast, and easy to integrate into any
project — making it a perfect choice for modern frontend development.

Why SeraJS?

SeraJS brings together the best parts of libraries like React, Solid, and Lit — blending familiar patterns with a fresh, minimal approach.

At just 1.25KB gzipped and only 135 lines of code, this reactive UI library stays ultra-light while still delivering powerful reactivity.

Whether you want a build system or prefer a no-build workflow, SeraJS has you covered. It’s flexible enough to fit your dev style — use it how you want.

🌱 Sera.js Basic Example

A minimal example showing a Hello World message using Sera.js.

📄 App.jsx

import { h } from "serajs";

export default function App() {
  return (
    <h1>Hello world</h1>
  );
}

No Build, No Dependencies

<!DOCTYPE html>
<html>
  <head>
    <title>Sera js 😎</title>
  </head>
  <body>
    <script type="module">
      import { h, setSignal, setEffect } from "//unpkg.com/serajs";

      function Hello() {
        const [count, setCount] = setSignal(0);

        setEffect(() => {
          console.log(count());
        });

        return h(
          "div",
          null,
          h("h1", null, "Hello World!"),
          h("p", { style: { color: "red" } }, "Do you Like Serajs?"),
          h("h1", null, () => `Count: ${count()}`),
          h(
            "button",
            { onclick: () => setCount(count() + 1) },
            "Increase Count"
          )
        );
      }

      const root = document.body;
      root.appendChild(Hello());
    </script>
  </body>
</html>

A 1KB Frontend Library in Just 135 Lines

Nazmul Hossain — Sat, 26 Apr 2025 01:44:48 +0000

📖 Introduction

GitHub Link

SeraJS is a lightweight, signal-based reactive JavaScript library for
building dynamic user interfaces.

At just 1.25KB gzipped and only 135 lines of code, it's a remarkably lightweight reactive UI library — offering powerful reactivity with minimal overhead.

⚡️ SeraJS focuses on minimalism and performance without sacrificing
developer experience.

Bundle Size Comparison (Minified + Gzipped)

Library	Size (gzipped)	Build Step Required	Main Purpose	Key Features
SeraJS	1.25kb	Optional 😎	Reactive UI	135 lines of code, extremely lightweight
React	~40kb	Yes	UI components	Virtual DOM, component-based architecture, JSX
Vue	~33kb	Optional	Progressive framework	Reactive data binding, component system, single-file components
Solid.js	~7kb	Yes	Reactive UI	No virtual DOM, compiled templates, fine-grained reactivity
Alpine.js	~7.1kb	No	Lightweight framework	Minimal DOM manipulation, declarative syntax, works with existing HTML
Preact	~4kb	Yes	React alternative	API compatible with React, smaller size, faster performance
htmx	~14kb	No	AJAX enhancements	HTML attributes for AJAX, minimal JavaScript, server-side rendering friendly

⚙️ Core Concepts

🔄 Signal-Based Reactivity

SeraJS uses a signal-based reactive system, a modern approach to state
management that enables efficient updates:

🧠 Signals

Self-contained reactive values that notify subscribers when they change.
🌀 Effects

Functions that automatically re-execute when their dependencies (signals)

change.
🧭 Memo

A memoization helper similar to React's useMemo, used to cache the result

of a computation based on reactive dependencies to avoid unnecessary
recalculations.
🔬 Fine-Grained Updates

Only the specific DOM elements affected by state changes are updated,

resulting in minimal re-rendering and high performance.

💡 SeraJS is designed to be intuitive, fast, and easy to integrate into any
project — making it a perfect choice for modern frontend development.

Why SeraJS?

SeraJS brings together the best parts of libraries like React, Solid, and Lit — blending familiar patterns with a fresh, minimal approach.

At just 1.25KB gzipped and only 135 lines of code, this reactive UI library stays ultra-light while still delivering powerful reactivity.

Whether you want a build system or prefer a no-build workflow, SeraJS has you covered. It’s flexible enough to fit your dev style — use it how you want.

🌱 Sera.js Basic Example

A minimal example showing a Hello World message using Sera.js.

📄 App.jsx

import { h } from "serajs";

export default function App() {
  return (
    <h1>Hello world</h1>
  );
}

No Build, No Dependencies

<!DOCTYPE html>
<html>
  <head>
    <title>Sera js 😎</title>
  </head>
  <body>
    <script type="module">
      import { h, setSignal, setEffect } from "//unpkg.com/serajs";

      function Hello() {
        const [count, setCount] = setSignal(0);

        setEffect(() => {
          console.log(count());
        });

        return h(
          "div",
          null,
          h("h1", null, "Hello World!"),
          h("p", { style: { color: "red" } }, "Do you Like Serajs?"),
          h("h1", null, () => `Count: ${count()}`),
          h(
            "button",
            { onclick: () => setCount(count() + 1) },
            "Increase Count"
          )
        );
      }

      const root = document.body;
      root.appendChild(Hello());
    </script>
  </body>
</html>

Start Your Business with Seraprogrammer

Nazmul Hossain — Mon, 07 Apr 2025 10:43:41 +0000

Creative & Modern Web Design Solutions

seraprogrammer website

Unlock the power of creativity with cutting-edge web design solutions tailored for modern experiences. Build stunning, responsive, and user-friendly websites that captivate and engage your audience effortlessly.

[Boost]

Nazmul Hossain — Wed, 02 Apr 2025 15:07:56 +0000

Jatin Sharma

Feb 1 '22

JavaScript Cheat Sheet that you should bookmark

#javascript #webdev #beginners #computerscience

365

Comments 31

34 min read

🔥 Unlock 40+ Premium AI Models – Absolutely FREE!

Nazmul Hossain — Fri, 28 Mar 2025 02:55:23 +0000

Unlock 40+ Premium AI Models – Absolutely FREE!
codekoriLink

A Lightweight & Smooth 5KB JavaScript Framework for Dynamic UI Experiences

Nazmul Hossain — Mon, 10 Mar 2025 10:12:45 +0000

🚀 Olova.js

Github

A lightweight, reactive JavaScript framework for building modern web
applications. Olova.js provides a simple yet powerful API for creating reactive
UIs with JSX support.

✨ Features

🎯 Signals - Reactive state management
🔄 Effects - Automatic dependency tracking and side effects
📝 Memos - Computed values with dependency tracking
🎨 JSX Support - Write components using familiar JSX syntax
🎭 Components - Function-based component system
🔗 Refs - Direct DOM node references
🎪 Lifecycle Hooks - onMount and onUnmount for component lifecycle management
🧩 Fragments - Support for multiple root elements
🎨 SVG Support - First-class SVG element support

📦 Installation

# Create a new project (recommended)
npm create vilo@latest

# Or install directly in an existing project
npm install olova

For now, you can use it directly in your project by copying the core files.

🚀 Quick Start Guide

1. Basic Counter Example

A simple counter showing reactive state management:

import { render, setSignal } from "./core/core.js";

const Counter = () => {
  const [count, setCount] = setSignal(0);

  return (
    <div>
      <h1>{() => count()}</h1>
      <button onClick={() => setCount(count() + 1)}>Increment</button>
    </div>
  );
};

2. Multiple Elements with Fragment

Using fragments to render multiple elements:

import { render, Fragment } from "./core/core.js";

const MultipleElements = () => {
  return (
    <>
      <div>First</div>
      <div>Second</div>
    </>
  );
};

3. Effects and Reactivity

Demonstrating reactive effects:

import { render, setSignal, setEffect } from "./core/core.js";

const EffectsExample = () => {
  const [name, setName] = setSignal("John");

  setEffect(() => {
    console.log(`Name changed to: ${name()}`);
  });

  return (
    <div>
      <input
        value={() => name()}
        onInput={(e) => setName(e.target.value)}
        type="text"
      />
      <p>Current name: {() => name()}</p>
    </div>
  );
};

4. Computed Values with Memos

Using memos for derived state:

import { render, setSignal, setMemo } from "./core/core.js";

const MemoExample = () => {
  const [firstName, setFirstName] = setSignal("John");
  const [lastName, setLastName] = setSignal("Doe");

  const fullName = setMemo(() => `${firstName()} ${lastName()}`);

  return (
    <div>
      <input
        value={() => firstName()}
        onInput={(e) => setFirstName(e.target.value)}
        placeholder="First Name"
      />
      <input
        value={() => lastName()}
        onInput={(e) => setLastName(e.target.value)}
        placeholder="Last Name"
      />
      <p>Full name: {() => fullName()}</p>
    </div>
  );
};

5. DOM References with Refs

Direct DOM manipulation using refs:

import { render, setRef } from "./core/core.js";

const RefsExample = () => {
  const inputRef = setRef();

  return (
    <div>
      <input ref={inputRef} type="text" placeholder="Focus me!" />
      <button onClick={() => inputRef().focus()}>Focus Input</button>
    </div>
  );
};

6. Component Lifecycle

Managing component lifecycle with hooks:

import { render, setSignal, onMount, onUnmount } from "./core/core.js";

const LifecycleExample = () => {
  const [isVisible, setIsVisible] = setSignal(true);

  const ChildComponent = () => {
    onMount(() => {
      console.log("Component mounted");
    });

    onUnmount(() => {
      console.log("Component will unmount");
    });

    return <div>Hello World</div>;
  };

  return (
    <div>
      <button onClick={() => setIsVisible(!isVisible())}>
        {() => (isVisible() ? "Hide" : "Show")}
      </button>
      {() => isVisible() && <ChildComponent />}
    </div>
  );
};

7. List Rendering

Building a dynamic todo list:

import { render, setSignal } from "./core/core.js";

const TodoList = () => {
  const [todos, setTodos] = setSignal([
    { id: 1, text: "Learn Olova.js" },
    { id: 2, text: "Build an app" },
  ]);

  const [newTodo, setNewTodo] = setSignal("");

  const addTodo = () => {
    if (newTodo().trim()) {
      setTodos([...todos(), { id: Date.now(), text: newTodo() }]);
      setNewTodo("");
    }
  };

  return (
    <div>
      <div>
        <input
          value={() => newTodo()}
          onInput={(e) => setNewTodo(e.target.value)}
          placeholder="New todo"
        />
        <button onClick={addTodo}>Add Todo</button>
      </div>
      <ul>
        {() =>
          todos().map((todo) => (
            <li key={todo.id}>
              {todo.text}
              <button
                onClick={() =>
                  setTodos(todos().filter((t) => t.id !== todo.id))
                }
              >
                Delete
              </button>
            </li>
          ))
        }
      </ul>
    </div>
  );
};

8. Conditional Rendering

Different patterns for conditional rendering:

import { render, setSignal } from "./core/core.js";

const Conditional = () => {
  const [show, setShow] = setSignal(false);
  const [theme, setTheme] = setSignal("light");

  return (
    <div>
      <button onClick={() => setShow(!show())}>Toggle Content</button>
      <button onClick={() => setTheme(theme() === "light" ? "dark" : "light")}>
        Toggle Theme
      </button>

      {/* Simple conditional */}
      {() => (show() ? <p>Content is shown</p> : <p>Content is hidden</p>)}

      {/* Conditional with multiple elements */}
      {() =>
        theme() === "light" ? (
          <div style={{ background: "white", color: "black" }}>Light Theme</div>
        ) : (
          <div style={{ background: "black", color: "white" }}>Dark Theme</div>
        )
      }

      {/* Conditional rendering with && operator */}
      {() => show() && <p>This only shows when show is true</p>}
    </div>
  );
};

9. Components and Props

Creating and using reusable components with props:

import { render } from "./core/core.js";

// Button component with props
const Button = ({ text, onClick }) => {
  return (
    <button
      onClick={onClick}
      style={{
        padding: "8px 16px",
        borderRadius: "4px",
        border: "none",
        backgroundColor: "#0070f3",
        color: "white",
        cursor: "pointer",
      }}
    >
      {text}
    </button>
  );
};

// Using the Button component
const App = () => {
  return (
    <div>
      <h1>Component Example</h1>
      <Button text="Click me!" onClick={() => alert("Button clicked!")} />
      <Button
        text="Another button"
        onClick={() => console.log("Second button clicked")}
      />
    </div>
  );
};

This example shows:

How to create a reusable component with props
Passing different props to multiple instances
Handling events through props
Applying inline styles to components

🛠️ API Reference

Core Functions

Function	Description
`setSignal(initialValue)`	Creates a reactive signal
`setEffect(effectFn)`	Creates an effect that tracks dependencies
`setMemo(computeFn)`	Creates a computed value
`setRef()`	Creates a ref for DOM elements
`render(component, root)`	Renders a component to the DOM
`onMount(callback)`	Runs when component mounts
`onUnmount(callback)`	Runs when component unmounts
`Fragment`	Wrapper for multiple elements
`html`	Internal function for DOM creation

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

MIT License

👨‍💻 Author

Nazmul Hossain

For more information and updates, please check back regularly as this framework
continues to evolve.

💡 Pro Tip: Check out the examples directory in the source code for more
detailed examples and best practices!

HTML Import Compiler

Nazmul Hossain — Mon, 03 Mar 2025 23:22:41 +0000

HTML Import Compiler

This project provides a powerful compiler that allows developers to import HTML files into other HTML files, similar to how JavaScript modules work. The compiler processes these imported files and generates a structured output containing a single index.html, styles.css, and index.js. This approach makes HTML development more modular and maintainable.

Features

Import HTML files inside another HTML file just like JavaScript modules.
Automatic Compilation: All HTML files are merged into a single index.html.
CSS Aggregation: All styles from different HTML files are combined into a single styles.css.
JavaScript Consolidation: All JavaScript files are gathered and merged into index.js.
Simple and easy-to-use setup.

Installation

Step 1: Clone the Repository

Run the following command in your terminal to clone the repository:

   git clone https://github.com/seraprogrammer/htmlplusplus.git
   cd htmlplusplus

Step 2: Install Dependencies

Before using the compiler, you need to install the required dependencies:

   npm install

How It Works

Project Structure

Your project should be structured like this:

/project-root
│── /pages
│   ├── app.html
│   ├── about.html
│   ├── counter.html
│── main.html
│── package.json

Creating Modular HTML Files

Inside the /pages folder, create individual HTML components. For example:

<!-- /pages/app.html -->
<div>
    <h1>Welcome to My App</h1>
</div>

Importing HTML Files in `main.html`

Instead of manually copying content, you can import HTML files inside main.html just like JavaScript:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        import Main from "./pages/app.html";
        import About from "./pages/about.html";
        import Counter from "./pages/counter.html";
    </script>

    <Main />
    <About />
    <Counter />
</body>
</html>

Compiling the Project

Run the following command in the terminal:

   npm run dev

This triggers the compiler, which processes the imported HTML files and generates a structured output in the dist/ folder.

Output Files

After running npm run dev, the compiler generates the following files:

/dist
│── index.html     (Merged HTML output)
│── styles.css     (All CSS combined into one file)
│── index.js       (All JavaScript compiled together)

Example Output

Your final index.html will look something like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Compiled Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div>
        <h1>Welcome to My App</h1>
    </div>
    <div>
        <h2>About Page</h2>
    </div>
    <div>
        <button>Counter</button>
    </div>
    <script src="index.js"></script>
</body>
</html>

Benefits

Modular HTML Development: No more messy copy-pasting of HTML content.
Automatic Styling Aggregation: Keeps styles in one place for better maintainability.
JavaScript File Consolidation: Ensures all scripts are properly merged into one file.
Easy Maintenance: Editing a single file automatically updates the compiled output.
Scalability: Ideal for large projects requiring multiple HTML components.

Contribution

We welcome contributions! Feel free to submit issues or pull requests to improve the project.

License

This project is licensed under the MIT License. You are free to use and modify it as needed.

Now, anyone can import HTML files into another like JavaScript! 🚀

HTML Micro Component System (619 bytes!)

Nazmul Hossain — Mon, 10 Feb 2025 00:02:47 +0000

🚀 Micro Component System (619 bytes!)

A tiny yet powerful HTML component system that lets you build reusable UI pieces with pure HTML. No frameworks, no dependencies - just drop in and go!

⚡️ Why This is Awesome

Microscopic: Only 619 bytes minified! That's smaller than a single tweet 🤯
Pure HTML Magic: Build components using native <template> tags
Zero Dependencies: No React, Vue, or any other framework needed
Dark Mode Ready: Sleek, modern UI with gradient goodness
Drop-Dead Simple: Learn it in 30 seconds, use it forever

🎮 Quick Start

<!-- 1. Add the tiny script -->
<script src="//unpkg.com/nextway"></script>

<!-- 2. Create your component -->
<template name="cool-button" props="text">
    <button class="gradient-btn">{text}</button>
</template>

<!-- 3. Use it anywhere! -->
<cool-button text="Click me!"></cool-button>

🎨 Killer Components

Gradient Button

<template name="neo-button" props="text">
    <button class="neo-gradient-btn">{text}</button>
</template>

Glass Card

<template name="glass-card" props="title, content">
    <div class="glass-effect">
        <h2>{title}</h2>
        <p>{content}</p>
    </div>
</template>

🌈 Super-Slick Styling

.neo-gradient-btn {
    background: linear-gradient(135deg, #4f46e5, #9333ea);
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.glass-effect {
    background: linear-gradient(135deg, #3b82f680, #1e293b80);
    backdrop-filter: blur(12px);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

🎯 How It Works

The magic happens in 4 tiny steps:

Finds <template> tags
Processes them into components
Replaces custom elements
Injects your props

💡 Pro Tips

Use semantic component names like <user-card> instead of generic ones
Keep components small and focused
Leverage CSS variables for theming
Chain components to build complex UIs

📦 Installation

Just add this one line. That's it. Really!

<script src="//unpkg.com/nextway"></script>

🌟 MIT Licensed

Free and open source. Build something awesome!

Built with ⚡️ by Nazmul Hossain, for developers

Forem: Nazmul Hossain

Sera UI - Modern React Component Library

Sera UI

✨ Features

🚀 Getting Started

CLI Installation

Manual Installation

🧩 Available Components

🎨 Theming

📜 License

💬 Community & Support

DevShowcase | Build Your Developer Portfolio Online in Minutes

Motiono - A React Animation Library Powered by GSAP

Motiono - A React Animation Library Powered by GSAP

Table of Contents

Installation

Basic Usage

Example: Animate a Heading (h1)

Available Tags

API Reference

motiono Component

Props

Example:

motiono.setGsapDefaults

Usage:

GSAP Integration

Example with GSAP:

Advanced Usage

Animation Chaining

Custom Easing Functions

Performance Considerations

Troubleshooting

🤷‍♀️ SeraJS is a lightweight, signal-based reactive JavaScript library

📖 Introduction

⚙️ Core Concepts

🔄 Signal-Based Reactivity

Why SeraJS?

🌱 Sera.js Basic Example

📄 App.jsx

No Build, No Dependencies

1KB Frontend Library

📖 Introduction

⚙️ Core Concepts

🔄 Signal-Based Reactivity

Why SeraJS?

🌱 Sera.js Basic Example

📄 App.jsx

No Build, No Dependencies

A 1KB Frontend Library in Just 135 Lines

📖 Introduction

⚙️ Core Concepts

🔄 Signal-Based Reactivity

Why SeraJS?

🌱 Sera.js Basic Example

📄 App.jsx

No Build, No Dependencies

Start Your Business with Seraprogrammer

[Boost]

JavaScript Cheat Sheet that you should bookmark

🔥 Unlock 40+ Premium AI Models – Absolutely FREE!

A Lightweight & Smooth 5KB JavaScript Framework for Dynamic UI Experiences

🚀 Olova.js

✨ Features

📦 Installation

🚀 Quick Start Guide

1. Basic Counter Example

2. Multiple Elements with Fragment

3. Effects and Reactivity

4. Computed Values with Memos

5. DOM References with Refs

6. Component Lifecycle

7. List Rendering

8. Conditional Rendering

9. Components and Props

🛠️ API Reference

Core Functions

🤝 Contributing

📄 License

👨‍💻 Author

HTML Import Compiler

Example: Animate a Heading (`h1`)

Importing HTML Files in `main.html`