Forem: EHSAN.

How to setup the Supabase authentication with Tanstack Router in Vite React.

EHSAN. — Wed, 16 Jul 2025 10:38:04 +0000

step by step guide to setup the authentication in vite tanstack router app with supabase

First Create the tanstack router boilerplate using this command

pnpm dlx create-tsrouter-app@latest app-name --template file-router

then install supabase js client using

pnpm add @supabase/supabase-js

After intstalling the @supabase/supabase-js module. create the .env file in the root of the project and add your supabase credentials in it like this.

VITE_SUPABASE_URL=<your supabase project url>  
VITE_SUPABASE_ANON_KEY=<your supabase anon key>

Then create the supabase.ts file and create supabase client in it

import { createClient } from “@supabase/supabase-js”;  
export const supabase = createClient(import.meta.env.VITE_SUPABASE_URL,  
import.meta.env.VITE_SUPABASE_ANON_KEY);

After creating the supabase client go to __root.ts file and replace createRootRoute function with createRootRouteWithContext and add the auth types in it like this.

import type { User } from “@supabase/supabase-js”;  
import { Outlet, createRootRouteWithContext } from “@tanstack/react-router”;  
import { TanStackRouterDevtools } from “@tanstack/react-router-devtools”;  

export const Route = createRootRouteWithContext<{auth: User | null}>()({  
component: () => (  
<><Outlet />  
<TanStackRouterDevtools />  
</>)});

then go to main.ts file and replace router instance context with this

// Create a new router instance  
const router = createRouter({  
  routeTree,  
  context: { auth: null },  
  defaultPreload: "intent",  
  scrollRestoration: true,  
  defaultStructuralSharing: true,  
  defaultPreloadStaleTime: 0,  
});

After that create the App() function in the main.ts file

function App() {  
  const session = useAuth();  
  return <RouterProvider router={router} context={{ auth: session }} />;  
}

here’s the useAuth hook code.

import { supabase } from "@/supabase";  
import type { User } from "@supabase/supabase-js";  
import { useEffect, useState } from "react";  

function getSupabaseAuthTokenKey(url: string): string {  
  try {  
    const hostname = new URL(url).hostname;  
    const projectId = hostname.split(".")[0];  
    return `sb-${projectId}-auth-token`; // supabase save session details in localStorage with this type of key format.  
  } catch (error) {  
    throw new Error("Invalid Supabase URL");  
  }  
}  

export function useAuth() {  
  const [session, setSession] = useState<{ user: User | null }>(  
    JSON.parse(  
      localStorage.getItem(  
        getSupabaseAuthTokenKey(import.meta.env.VITE_SUPABASE_URL)  
      ) || "{}"  
    ) || null  
  );  

  useEffect(() => {  
    const initialize = async () => {  
      const { data } = await supabase.auth.getUser();  
      setSession(data);  
    };  
    initialize();  
  }, []);  

  return session.user;  
}

then replace the <RouterProvider router-{router}/> with the <App/> in root.render() Method like this.

// Render the app  
const rootElement = document.getElementById("app");  
if (rootElement && !rootElement.innerHTML) {  
  const root = ReactDOM.createRoot(rootElement);  
  root.render(  
    <StrictMode>  
      <App />  
    </StrictMode>  
  );  
}

then create a new unauthenticated route file for handling login under the route folder like this routes/(auth)/sign-in.tsx then paste this code

import { supabase } from "@/supabase";  
import { createFileRoute, useNavigate } from "@tanstack/react-router";  

export const Route = createFileRoute("/(auth)/sign-in")({  
  component: SignIn,  
});  

function SignIn() {  
  const navigate = useNavigate({ from: "/sign-in" });  
  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {  
    event.preventDefault(); // Prevent the default form submission  

    const formData = new FormData(event.currentTarget); // Get form data  
    const data = {  
      email: formData.get("email"),  
      password: formData.get("password"),  
    };  

    // Example: validation (optional)  
    if (!data.email || !data.password) {  
      alert("Please fill in all fields");  
      return;  
    }  
    const { data: sessionData } = await supabase.auth.signInWithPassword({  
      email: data.email as string,  
      password: data.password as string,  
    });  

    if (sessionData.session?.user.id) {  
      navigate({ to: "/" });  
    }  
  };  

  return (  
    <form onSubmit={handleSubmit} className="grid gap-3">  
      <label htmlFor="email">Email</label>  
      <input  
        name="email"  
        type="email"  
        placeholder="name@example.com"  
        required  
      />  

      <label htmlFor="password">Password</label>  
      <input name="password" type="password" placeholder="********" required />  

      <button className="mt-2" type="submit">  
        Login  
      </button>  
    </form>  
  );  
}

This is a simple unstyled login form to handle login functionality.

Until now, we have done these steps:

Created the boilerplate code with Tanstack router + vite.
Added .env variables for the supabase client.
Initialized Supabase client.
Added the Auth context in the router.
Created the useAuth() hook.
Created the App() function in main.ts and integrated within root.render() method.
Created the routes/(auth)/sign-in.tsx route and implemented the login functionality

Now we, need to create the authenticated routes to check if the authentication really working or not.

We need these steps to done:

Create the _authenticated/route.tsx layout route & implement authentication
Move routes/index.tsx to routes/_authenticated/index.tsx

So then, under the routes folder create the _authenticated folder and then create the route.tsx file. Now the folder structure of routes folder should look like this.

├── App.css  
├── hook  
│   └── use-auth.tsx  
├── logo.svg  
├── main.tsx  
├── reportWebVitals.ts  
├── routes # This is the route folder in which we are working  
│   ├── (auth)  
│   │   └── sign-in.tsx  
│   ├── \_authenticated  
│   │   ├── index.tsx # "/" protected route  
│   │   └── route.tsx # The authenticated layout file  
│   └── \_\_root.tsx  
├── routeTree.gen.ts  
├── styles.css  
└── supabase.ts

routes/_authenticated/routes.tsx file

import { supabase } from "@/supabase";  
import { createFileRoute, Outlet, redirect } from "@tanstack/react-router";  

export const Route = createFileRoute("/_authenticated")({  
  async beforeLoad({ context: { auth } }) {  
    if (!auth?.id) {  
      const { data } = await supabase.auth.getUser();  
      if (!data.user?.id) throw redirect({ to: "/sign-in" });  
      return { auth: data.user };  
    }  
  },  
  component: RouteComponent,  
});  

function RouteComponent() {  
  return (  
    <div>  
      Hello from authenticated route!  
      <Outlet />  
    </div>  
  );  
}

routes/_authenticated/index.tsx file

import { createFileRoute } from "@tanstack/react-router";  
import logo from "../../logo.svg";  
import "../../App.css";  

export const Route = createFileRoute("/_authenticated/")({  
  component: AuthenticatedRoute,  
});  

function AuthenticatedRoute() {  
  return (  
    <div className="App">  
      <header className="App-header">  
        <img src={logo} className="App-logo" alt="logo" />  
        <p>  
          Edit <code>src/routes/\_authenticated/index.tsx</code> and save to  
          reload.  
        </p>  
        <a  
          className="App-link"  
          href="https://reactjs.org"  
          target="_blank"  
          rel="noopener noreferrer"  
        >  
          Learn React  
        </a>  
        <a  
          className="App-link"  
          href="https://tanstack.com"  
          target="_blank"  
          rel="noopener noreferrer"  
        >  
          Learn TanStack  
        </a>  
      </header>  
    </div>  
  );  
}

So, That’s it. We integrated supabase authentication with the tanstack router + vite

So if you wanna see the source code you can get it from my GitHub repository.

https://github.com/Your-Ehsan/tutorials/tree/setup-auth-in-react-with-tanstack-and-supabase

or download the code

git clone https://github.com/Your-Ehsan/tutorials.git --branch setup-auth-in-react-with-tanstack-and-supabase --single-branch supabase-auth-with-tanstack

🤯 7 Totally FREE! Mind-Blowing AI Websites You Won’t Believe actually exist

EHSAN. — Sun, 06 Oct 2024 10:16:43 +0000

discover a world of endless possibilities, all at your fingertips?

Prepare to be amazed as I introduce you to eight incredible websites that are not only free but also packed with mind-blowing features. These online tools can help you accomplish countless tasks, from making money to simply having fun.

So, grab a pen and paper and get ready to save this list, because you won’t find it anywhere else.

Let’s dive in!

1 — LlamaCoder: Revolutionizing Open-Source Development

Together AI’s LlamaCoder app has taken the developer world by storm. Launched just over a month ago, this open-source web application has quickly gained immense popularity, amassing an impressive 2,000 GitHub stars, hundreds of developer clones, and an astonishing 200,000 app generations.

The driving force behind LlamaCoder’s success is the Llama 3.1 405B model. This groundbreaking model has proven to be the first open-source model to outperform even the best closed-source models in specific coding use cases.

Together AI’s other innovative tools, such as LlamaTutor and TurboSeek, further demonstrate the potential of open-source LLMs to rival proprietary models while also providing essential safety features for responsible development.

The state-of-the-art capabilities of Llama 3.1 405B in general knowledge, steerability, math, tool use, and multilingual translation are poised to accelerate the adoption of open-source AI by developers and enterprises.

By offering an open approach, Together AI empowers developers to maintain ownership of their fine-tuned weights and models. This not only ensures unmatched performance, accuracy, and cost-efficiency but also encourages innovation within the AI community.

Many companies are already switching from closed-source providers to embrace the benefits of open-source AI, thanks to Together AI’s strategy.

Together AI is paving the way for a new era of open-source development by enabling organizations to truly own their data, models, and maintain full flexibility. This approach is fostering a more collaborative and innovative environment, where developers can harness the power of AI without compromising their autonomy or control.

2 — V0.dev: Turning Text into UI with AI

Imagine describing your dream website design, and then having the code for it magically appear!

That’s the power behind V0.dev, an innovative AI tool from Vercel Labs. This game-changer simplifies the process of generating UI components for web development, making life easier for developers, especially those working in React environments.

Here’s how V0.dev works its magic:

Text to UI: Describe your desired UI element using plain text, and V0.dev will generate several design options based on your description. This allows for rapid iteration and experimentation, helping you quickly find the perfect look and feel for your website.
Modern Framework Friendly: V0.dev speaks the language of modern web development. It primarily generates React code compatible with frameworks like Next.js, shadcn/ui, and Tailwind CSS. So, if you’re already using these tools, V0.dev seamlessly integrates into your workflow.
Customization Power: Don’t like a particular element? V0.dev allows you to fine-tune the generated design and tweak individual components to match your exact vision. Once you’re happy with the results, simply copy the code and paste it into your project.

Getting Started with V0.dev:

The good news? V0.dev offers a free tier with 200 credits per month, allowing you to experiment with its capabilities. However, if you need advanced features like private code generation and custom themes, a premium plan is available.

Here are some things to keep in mind:

React Focus: Currently, V0.dev caters primarily to React developers. If you’re working with other frameworks, you might need to look elsewhere.
Human Touch Still Needed: While V0.dev automates much of the initial design work, it’s not a complete replacement for your programming skills. You’ll still need to optimize and refine the generated code to ensure it functions flawlessly.

Overall, V0.dev is a powerful tool that can significantly speed up and streamline the UI development process. It’s a perfect fit for developers who want to leverage AI’s capabilities while maintaining control and adding their own human touch to create stunning user interfaces.

3 — AI Jukebox: Your Musical Playground

Ever dreamed of creating your own music without any musical training? AI Jukebox, developed by enzostvs on Hugging Face, is here to make your dreams a reality. This browser-based tool allows you to generate music based on simple text prompts.

How does it work?

Describe your sound: Specify the genre, mood, or specific elements you want in your track. For example, you could ask for an “80s pop track with bassy drums and synth.”
Customize your creation: AI Jukebox gives you control over the length, style, and atmosphere of your music. This makes it easy to create background music for videos, podcasts, or even experiment with different musical styles.

Who can use it?

Content creators: If you need music for your videos, podcasts, or social media content, AI Jukebox can quickly generate tracks that fit your needs.
Music enthusiasts: Whether you’re a seasoned musician or just starting your musical journey, this tool can help you explore new sounds and experiment with different genres.
Anyone looking for inspiration: Use AI Jukebox to brainstorm song ideas or simply have fun creating music.

A word of caution:

While AI Jukebox is a powerful tool, some users have reported potential issues. It’s always a good idea to explore the tool with caution and be aware of its limitations.

4 — Websim.ai: Unleash Your Imagination and Build the Web of Tomorrow

Imagine a world where the internet is not just a collection of websites, but a living, breathing playground of possibilities. Websim.ai, a revolutionary AI-powered platform, makes this dream a reality.

What is Websim.ai?

This unique tool allows you to create and explore a simulated internet — all driven by your imagination.

With just a simple prompt or URL, Websim.ai utilizes advanced AI models like GPT-4 and Claude 3.5 Sonnet to generate dynamic websites, interactive visualizations, and even functional code.

No coding? No problem!

Websim.ai is designed for everyone, regardless of technical expertise. Its intuitive interface enables you to build games, websites, and other interactive digital experiences with just a few clicks. Whether you’re a seasoned developer or a complete beginner, Websim.ai empowers you to bring your ideas to life.

Here’s what makes Websim.ai special:

Rapid Prototyping: Quickly test and refine your concepts before investing time and resources in full development.
Website Design Made Easy: Build simple websites without writing a single line of code. Perfect for small businesses or personal projects.
Educational Simulations: Create engaging and interactive learning experiences that make education fun.
Endless Creative Potential: Explore the possibilities and push the boundaries of what’s possible online.

Start Exploring Today:

Websim.ai is completely free to use! You can sign up with your Google or Discord account and unleash your creativity. Experiment with everything from basic web page generation to complex interactive designs.

5 — 10015.io: Your One-Stop Shop for Dev Tools

Feeling overwhelmed by the ever-growing list of bookmarks needed for your web development projects? Say goodbye to the clutter and hello to 10015.io, your new best friend in the world of front-end development.

Launched in 2020 by Fatih Telis, 10015.io is a game-changer. This versatile online toolbox features a clean and user-friendly interface, packed with a wide range of tools to streamline your workflow.

What’s in the box?

Text Tools: From basic text manipulation to fancy case converters, 10015.io has everything you need to work your text magic.
Image Editors: Crop, resize, or even convert image formats — all within the platform.
CSS Wizards: Master the power of style sheets with tools like the CSS triangle generator.
Coding Companions: Write cleaner, more efficient code with syntax highlighting and other coding utilities.
Color Pickers: Find the perfect shade for your project with a user-friendly color picker.
Social Media Sharpshooters: Craft and schedule your social media posts directly from 10015.io.

Why choose 10015.io?

All-in-one Convenience: Ditch the bookmarks! Access a multitude of tools in one centralized location, saving you time and frustration.
Streamlined Workflow: Work smarter, not harder. 10015.io keeps everything you need readily available, promoting efficient and productive development.
Constantly Evolving: The platform stays up-to-date with the latest trends, adding new tools regularly to cater to the ever-changing needs of the development community.

6 — What AI Can Do Today: Your AI Tool Guide

Feeling overwhelmed by the vast landscape of AI tools? What AI Can Do Today is here to help! This powerful platform is designed to guide you through the exciting world of artificial intelligence and discover the countless tasks AI can accomplish.

How does it work?

Comprehensive Search: What AI Can Do Today analyzes over 5,800 AI tools and lists more than 30,000 tasks they can help with. Whether you need help writing, generating images, or even seeking medical or legal advice, this platform has you covered.
Personalized Recommendations: Simply type in your query as naturally as you would speak to a friend, and the platform suggests relevant AI tools tailored to your needs.
Flexible Filtering: With over 100 filter categories, you can easily refine your search and explore specialized tools for specific applications like coding, music, or art.

Why use What AI Can Do Today?

Beginner-friendly: Even if you’re new to AI, this platform makes it easy to understand and navigate.
Expert-approved: Whether you’re a seasoned AI enthusiast or just starting your journey, this platform can be a valuable resource.
Free and premium options: Explore a wide range of AI tools, including both free and premium options.

7 — AI Comic Factory: Your Digital Drawing Board

Ever dreamed of creating your own comic but lacked the artistic skills? AI Comic Factory, developed by Julian Bilcke on Hugging Face, is here to make your dream a reality.

How does it work?

Simple prompts: Input a text description of your desired comic panel, and the AI will do the rest.
Automatic generation: The AI generates a fully illustrated comic panel, including characters, backgrounds, and dialog that match your description.
User-friendly interface: Even if you’re not an artist, AI Comic Factory’s intuitive interface makes it easy to bring your comic ideas to life.

Key features:

Versatile layouts: Choose from a variety of panel layouts to suit your storytelling style.
Consistent characters: Maintain character consistency across multiple panels for a cohesive comic experience.
Multi-page comics: Create comics with multiple pages, allowing for more complex narratives.

Limitations and considerations:

Free with limitations: While the tool is free to use, there may be limitations in terms of generation speed and image resolution compared to premium services.
Requires experimentation: Experiment with different prompts and settings to achieve your desired results.

If you know of any other free and valuable tools similar to these, please share them in the comments. I’ll be sure to update the post with your recommendations 😉.

✨ Disclaimer

Please note that I am not affiliated with any of the tools mentioned in this post. I’m not receiving any compensation or benefits for recommending these tools. I’ve included them based on my personal experience and belief that they can be helpful to my readers.

🚀 10 Game-Changing Node.js Features You Can't Afford to Miss 🌟

EHSAN. — Wed, 18 Sep 2024 13:25:19 +0000

Introduction 🚀

There's a common misconception that Node.js is outdated. In fact, it’s constantly evolving, with recent updates introducing a plethora of features that modernize its functionality. Let’s dive into these exciting new features and see how they can transform your development experience.

TypeScript Support 🛠️

Node.js now has built-in support for TypeScript, a massive win for developers who prefer static typing. Traditionally, running a TypeScript file in Node.js resulted in parsing errors, but with the latest experimental features, you can run .ts files using the --experimental-strip-types flag.

node --experimental-strip-types index.ts

This flag removes TypeScript types, allowing the code to run as standard JavaScript.

(node:5600) ExperimentalWarning: Type Stripping is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
(node:5600) [MODULE_TYPELESS_PACKAGE_JSON] Warning: /NodeJS/amazing-features/index.ts parsed as an ES module because module syntax was detected; to avoid the performance penalty of syntax detection, add "type": "module" to your package.json.

Although the feature is experimental, it works well in most cases. You can further enhance performance by adding "type": "module" in your package.json:

{
  "name": "amazing-features-of-nodejs",
  "version": "1.0.0",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "typescript": "^5.6.2"
  }
}

After adding "type": "module", the warning about module syntax will be resolved.

Built-In Test Runner 🧪

One of the most exciting new features is the built-in test runner in Node.js. You can now run tests natively without needing external libraries like Jest. The built-in test runner allows you to create test files using describe and it functions directly from Node.js.

Here’s an example of a index.test.js file for a TypeScript module:

import assert from "node:assert";
import { describe, it } from "node:test";
import { IsAdult } from "./index.ts";

describe("#isAdult", () => {
  it("Checks if a user is an adult", () => {
    assert(IsAdult(29));
  });
});

Make sure to import the TypeScript file with the .ts extension. Run the test using the following command:

node --experimental-strip-types --test

The output will look like this:

▶ #isAdult
  ✔ Check if user is an adult (5ms)
ℹ tests 1
ℹ suites 1
ℹ pass 1
ℹ duration 449ms

You can also add test coverage with the --experimental-test-coverage flag:

node --experimental-strip-types --experimental-test-coverage --test

For even more control, you can modify the test output format by using the --test-reporter flag.

node --experimental-strip-types --experimental-test-coverage --test-reporter tap --test

Watch Flag ⏳

node --watch --experimental-strip-types --experimental-test-coverage --test-reporter tap --test

The --watch flag automatically reruns your code whenever files change, eliminating the need for tools like Nodemon. Simply run your tests with the --watch flag, and Node.js will monitor file changes, re-running tests automatically.

Environment File Support 🌍

Node.js now supports loading environment variables directly from a .env file using the --env-file flag, making environment management simpler.

Create a .env file with your variables:

SECRET_VALUE="your-secret-value"

Access your variables in Node.js like this:

console.log(process.env.SECRET_VALUE);  // your-secret-value

Run your app with:

node --experimental-strip-types --env-file=.env index.ts

Promises in Standard Libraries 📜

Node.js is moving towards a promise-based approach across its standard libraries. For example, the fs.readFile method now supports promises:

import { readFile } from "fs/promises";

const file = await readFile("./index.ts");
console.log(file);  // <Buffer 69...>

This change makes asynchronous code cleaner and more manageable by using await instead of callbacks.

Top-Level Await ⏩

Node.js now supports top-level await, allowing you to use the await keyword outside of async functions:

const file = await readFile("./index.ts");
console.log(file);

This feature improves code readability and removes the need for wrapping code in async functions.

Glob File Search 🔍

You can now search for files using glob patterns directly in Node.js:

import { glob } from "fs/promises";

const testFile = await glob("**/*.test.js").next();
console.log(testFile);  // { value: 'index.test.js', done: false }

Built-In Debugger 🐞

Node.js includes a built-in debugger that works seamlessly with Chrome DevTools. To start debugging:

node --experimental-strip-types --env-file=.env --inspect-brk index.ts

WebSocket Support 🌐

Node.js has added built-in support for WebSockets, allowing you to connect to WebSocket servers directly:

new WebSocket("wss://your-websocket-url");

SQLite Support 🗄️

Node.js now offers built-in support for SQLite databases. Here's how to create an in-memory SQLite database and interact with it:

import { DatabaseSync } from "node:sqlite";

const database = new DatabaseSync(":memory:");
database.exec(`CREATE TABLE data(key INTEGER PRIMARY KEY, value TEXT) STRICT`);

const insert = database.prepare("INSERT INTO data (key, value) VALUES (?, ?)");
insert.run(1, "hello");
insert.run(2, "world!");

const query = database.prepare("SELECT * FROM data ORDER BY key");
console.log(query.all());  // [{ key: 1, value: 'hello' }, { key: 2, value: 'world!' }]

To run the code, use:

node --experimental-strip-types --experimental-sqlite index.ts

Conclusion 🎉

Node.js continues to evolve, incorporating features that enhance the developer experience. From built-in TypeScript support to native testing and database integration, these updates make Node.js a modern, powerful tool for web development. Start using these features today to take your projects to the next level!

Create your own 📷 image compressor & to webp convertor using HTML, CSS, JavaScript from scratch 🚀

EHSAN. — Sat, 07 Sep 2024 13:23:03 +0000

Introducing a new image compressor and resizer: Reduce your image sizes without compromising quality. This Image Resizer & Compressor can resize and compress any image and it can also convert any Image to .webp. It means this is also any image to .webp convertor 🎉.

Images are an essential component of websites, blogs, and social media platforms. However, large images can slow down your website's loading time, leading to a poor user experience. This is where image compression and resizing come in - they allow you to reduce the size of your images without compromising on their quality. In this blog post, we introduce a new image compressor and resizer that will help you achieve just that.

What is an image compressor and resizer?

An image compressor and resizer is a tool that allows you to reduce the file size of your images without compromising on their quality. It achieves this by using various compression algorithms that remove unnecessary data from the image file while maintaining its visual integrity. A resizer, on the other hand, allows you to change the dimensions of your image while maintaining its aspect ratio.

Easy to use: Simply upload your image, choose the compression level resize it if you wish, and download the compressed image.

Customizable: Our tool allows you to choose the compression level that suits your needs. You can choose between high, medium, and low compression levels depending on your requirements.

Faster loading times: Compressing and resizing your images will reduce their file size, making them load faster on your website or social media platform.

Improved user experience: Faster loading times mean a better user experience for your visitors.

Reduced storage space: Compressing your images will also help you save storage space on your device or server.

Better SEO: Faster loading times can also improve your website's search engine ranking.

Let's start building

First of all, let's create an index.html file in the root of our project's folder. Then paste this code into the index.html file.


<!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>@your-ehsan | JS — Image_resizer & Compressor</title>
      <link
        rel="shortcut icon"
        href="https://github.com/your-ehsan.png"
        type="image/x-icon"
      />
    </head>
    <body>
      <div class="wrapper">
        <div id="UploadBox" class="upload-box">
          <input id="FileInput" type="file" accept="image/*" alt="" />
          <img hidden id="SelectedIMG" src="" alt="" />
          <i>
            <svg
              id="InputSVG"
              xmlns="http://www.w3.org/2000/svg"
              class="InputSVG"
              viewBox="0 0 640 512"
            >
              <path
                d="M144 480C64.5 480 0 415.5 0 336c0-62.8 40.2-116.2 96.2-135.9c-.1-2.7-.2-5.4-.2-8.1c0-88.4 71.6-160 160-160c59.3 0 111 32.2 138.7 80.2C409.9 102 428.3 96 448 96c53 0 96 43 96 96c0 12.2-2.3 23.8-6.4 34.6C596 238.4 640 290.1 640 352c0 70.7-57.3 128-128 128H144zm79-217c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l39-39V392c0 13.3 10.7 24 24 24s24-10.7 24-24V257.9l39 39c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-80-80c-9.4-9.4-24.6-9.4-33.9 0l-80 80z"
              />
            </svg>
          </i>
          <p class="InputText">Browse file to Upload</p>
        </div>
        <div class="content">
          <div class="row sizes">
            <div class="column width">
              <label for=""> width </label>
              <input type="number" name="" id="WidthInput" />
            </div>
            <div class="column height">
              <label for=""> height </label>
              <input type="number" name="" id="HeightInput" />
            </div>
          </div>
          <div class="row checkboxes">
            <div class="column ratio">
              <input type="checkbox" name="" id="ratio" checked />
              <label for="ratio">Lock aspect ratio</label>
            </div>
            <div class="column quality">
              <input type="checkbox" name="" id="quality" checked />
              <label for="quality">Reduce Quality</label>
            </div>
          </div>
          <button id="DownloadBtn" accesskey="d" class="download-btn">
            Download
          </button>
        </div>
      </div>
    </body>
  </html>

After that you have to give your code some beauty, I am giving your HTML some beauty. For that, you have to create a new *.css *file with the name *style.css *and then link that stylesheet with your HTML file by adding this line between your head tag ->

like this one

<!-- ... rest of the other code -->
<head>
  <link rel="stylesheet" src="./style.css"/>
</head>
<!-- ... other code  -->

after creating your stylesheet file and then linking it with your HTML file you have to add some style code in your style.css file.


@font-face {
  font-family: "Ubuntu";
  src: url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap");
}  
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Ubuntu", sans-serif;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #833ab4;
  background: -moz-linear-gradient(
    204deg,
    #833ab4de 0%,
    #1d70fdde 62%,
    #45fcdb93 100%
  );
  background: -webkit-linear-gradient(
    204deg,
    #833ab4de 0%,
    #1d70fdde 62%,
    #45fcdb93 100%
  );
  background: linear-gradient(
    204deg,
    #833ab4de 0%,
    #1d70fdde 62%,
    #45fcdb93 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#833ab4",endColorstr="#45fcdb",GradientType=1);
}
.wrapper {
  width: 450px;
  height: 280px;
  overflow: hidden;
  padding: 30px;
  background: #fff;
  border-radius: 12px;
  transition: 0.5s ease-out;
}
.active {
  height: max-content;
}
.wrapper .upload-box {
  height: 225px;
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  flex-direction: column;
  border: 2px dashed #696969;
}
.upload-box p {
  font-size: 1.2rem;
  margin-top: 20px;
  color: #696969;
}
.upload-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
  border: 6px;
}
.upload-box i {
  width: 30%;
  fill: #696969;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
  border: 6px;
}
.wrapper .content {
  margin-top: 30px;
}
.content .row {
  display: flex;
  justify-content: space-around;
}
.row .column label {
  font-size: 1.2rem;
  font-stretch: condensed;
  margin: 0 10px;
}
#FileInput {
  width: 100%;
  height: 100%;
  display: none;
}
.sizes .column input {
  width: 100%;
  height: 50px;
  outline: none;
  margin-top: 8px;
  padding: 0 16px;
  font-size: 1.2rem;
  font-weight: bold;
  color: #363bb6;
  border-radius: 6px;
  border: 1px solid #7c7db6;
}
.sizes .column input:focus {
  padding: 0 16px;
  border: 2px solid #5f5f5f;
}
.content .checkboxes {
  margin-top: 20px;
}
.checkboxes .column {
  display: flex;
  align-items: center;
}
.checkboxes .column input {
  width: 18px;
  height: 18px;
  accent-color: #7c7db6;
}
.content .download-btn {
  width: 100%;
  transition: all 0.5s ease-in-out;
  color: #fff;
  outline: none;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  border-radius: 6px;
  padding: 16px 0;
  margin: 30px 0 10px;
  background: cadetblue;
  background: rgb(131, 58, 180);
  background: -moz-linear-gradient(
    94deg,
    #833ab4de 0%,
    #1d70fdde 62%,
    #45fcdb93 100%
  );
  background: -webkit-linear-gradient(
    94deg,
    #833ab4de 0%,
    #1d70fdde 62%,
    #45fcdb93 100%
  );
  background: linear-gradient(
    94deg,
    #833ab4de 0%,
    #1d70fdde 62%,
    #45fcdb93 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#833ab4",endColorstr="#45fcdb",GradientType=1);
  text-transform: capitalize;
}
.content .download-btn:active {
  background: #833ab4;
  background: -moz-linear-gradient(
    189deg,
    #833ab4de 19%,
    #1d70fdde 71%,
    #45fcdb93 100%
  );
  background: -webkit-linear-gradient(
    189deg,
    #833ab4de 19%,
    #1d70fdde 71%,
    #45fcdb93 100%
  );
  background: linear-gradient(
    189deg,
    #833ab4de 19%,
    #1d70fdde 71%,
    #45fcdb93 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#833ab4",endColorstr="#45fcdb",GradientType=1);
}
.hidden {
  display: none;
}
@media (min-width: 375px) {
  .wrapper {
    width: 350px;
    height: 250px;
    padding: 15px;
  }
  .active {
    height: max-content;
  }
  .row .column label {
    font-size: 0.8rem;
    text-transform: capitalize;
  }
  .checkboxes .column input {
    width: 12px;
    height: 12px;
  }
  .sizes .column input {
    height: 40px;
    margin-top: 8px;
    padding: 0 12px;
    font-size: 1rem;
  }
}

after adding and linking this stylesheet with the HTML file that I provided earlier you noticed that the image compressor is still look like the actual one.

we are not done yet, we also need to add some logic 💡 using the JavaScript code. so that we can make our project useable.

let's start writing JS code.

first create main.js file with your *html *file like you did with *css *before. then link it with your html file by adding this snippet after <body></body> tag like this.

💡 remember this script tag should be within you <html></html> tag.

<!-- ... rest of the code -->
<script src="./main.js" rel="text/script"/>
<!-- rest of the code ... -->

Before continuing please confirm that your html file and *main.js *files are linked then write this code in your JS file

Gathering Magical Tools (DOM Elements):

// Gathering magical tools from the wizard's wand (DOM)
let FileInput = document.querySelector("#FileInput"),
  WidthInput = document.querySelector("#WidthInput"),
  HeightInput = document.querySelector("#HeightInput"),
  ratio = document.querySelector("#ratio"),
  quality = document.querySelector("#quality"),
  SelectedIMG = document.querySelector("#SelectedIMG"),
  UploadBox = document.querySelector("#UploadBox"),
  InputText = document.querySelector(".InputText"),
  DownloadBtn = document.querySelector("#DownloadBtn");

This part finds and stores different elements (like buttons, switches, and containers) from the HTML document. Each element is found using its unique ID or class name.

Storing Original Image Ratio:

let OgImageRatio;

// Function to load a selected picture
const loadFile = (e) => {
  const file = e.target.files[0];
  if (!file) return;
  SelectedIMG.src = URL.createObjectURL(file);
  SelectedIMG.addEventListener("load", () => {
    SelectedIMG.removeAttribute("hidden");
    document.querySelector("#InputSVG").classList = "hidden";
    InputText.className = "hidden";
    WidthInput.value = SelectedIMG.naturalWidth;
    HeightInput.value = SelectedIMG.naturalHeight;
    OgImageRatio = SelectedIMG.naturalWidth / SelectedIMG.naturalHeight;
    document.querySelector(".wrapper").classList.add("active");
  });
};

When a picture is selected, this code calculates the original image ratio and stores it for later use. It also sets up the selected image for display.

Adjusting Width and Height:

WidthInput.addEventListener("keyup", () => {
  const height = ratio.checked
    ? WidthInput.value / OgImageRatio
    : HeightInput.value;
  HeightInput.value = Math.floor(height);
});

HeightInput.addEventListener("keyup", () => {
  const width = ratio.checked
    ? HeightInput.value * OgImageRatio
    : WidthInput.value;
  WidthInput.value = Math.floor(width);
});

These parts dynamically adjust the width and height inputs based on user actions (typing). The aspect ratio can be locked or unlocked using the 'ratio' checkbox.

Resizing and Downloading the Image:

function ResizeandDownload() {
  // Creating magical canvas and link elements
  const canvas = document.createElement("canvas");
  const a = document.createElement("a");
  const ctx = canvas.getContext("2d");

  canvas.width = WidthInput.value;
  canvas.height = HeightInput.value;

  // Checking if image quality should be reduced
  const imgQuality = quality.checked ? 0.2 || 0.5 : 1.0;

  // Drawing the selected image on the canvas
  ctx.drawImage(SelectedIMG, 0, 0, canvas.width, canvas.height);

  // Creating a magical link to download the image in .webp format
  a.href = canvas.toDataURL("image/webp", imgQuality);
  a.download = `@your-ehsan_${new Date().getTime()}`; // Naming the downloaded file
  a.click(); // Initiating the magical download
}

// Starting the resizing and download process when the magical word is clicked
DownloadBtn.addEventListener("click", ResizeandDownload);

This section creates a canvas, draws the selected image on it, and then converts it to a .webp format before initiating the download when the "Download" button is clicked.

Additional Triggers and Actions:

// Loading the selected picture when a picture is chosen
FileInput.addEventListener("change", loadFile);

// Triggering the treasure chest (file input) when the upload box is clicked
UploadBox.addEventListener("click", () => FileInput.click());

These parts listen for events: 'change' for the file input to load the picture and 'click' for the upload box to trigger the file input when clicked.

This detailed breakdown explains how each part of the JavaScript code contributes to the functionality of the image resizer and compressor tool.

after adding all these lines step by step your image-compressor may be completed yet and working fine. if not then add here's the complete JS file that you may need to check.

Complete main.js file

// Gathering magical tools from the wizard's wand (DOM)
let FileInput = document.querySelector("#FileInput"), // Treasure chest for pictures
  WidthInput = document.querySelector("#WidthInput"), // Button to adjust width
  HeightInput = document.querySelector("#HeightInput"), // Button to adjust height
  ratio = document.querySelector("#ratio"), // Switch for aspect ratio
  quality = document.querySelector("#quality"), // Switch for image quality
  SelectedIMG = document.querySelector("#SelectedIMG"), // Picture frame
  UploadBox = document.querySelector("#UploadBox"), // Door to pick pictures
  InputText = document.querySelector(".InputText"), // Special text for interaction
  DownloadBtn = document.querySelector("#DownloadBtn"); // Secret word to start magic

let OgImageRatio; // Variable to store original image ratio

// Function to load a selected picture
const loadFile = (e) => {
  const file = e.target.files[0]; // Picking the selected picture
  if (!file) return; // If no picture is selected, stop here
  SelectedIMG.src = URL.createObjectURL(file); // Show the selected picture in the picture frame
  SelectedIMG.addEventListener("load", () => { // When the picture is loaded:
    SelectedIMG.removeAttribute("hidden"); // Show the picture
    document.querySelector("#InputSVG").classList = "hidden"; // Hide the upload icon
    InputText.className = "hidden"; // Hide the upload text
    WidthInput.value = SelectedIMG.naturalWidth; // Get the picture's width
    HeightInput.value = SelectedIMG.naturalHeight; // Get the picture's height
    OgImageRatio = SelectedIMG.naturalWidth / SelectedIMG.naturalHeight; // Calculate the original image ratio
    document.querySelector(".wrapper").classList.add("active"); // Activate the magical wrapper
  });
};

// Adjusting height based on width input
WidthInput.addEventListener("keyup", () => {
  const height = ratio.checked // Checking if aspect ratio should be kept
    ? WidthInput.value / OgImageRatio // If yes, calculate height based on width and original ratio
    : HeightInput.value; // If no, keep the existing height value
  HeightInput.value = Math.floor(height); // Set the calculated or existing height
});

// Adjusting width based on height input
HeightInput.addEventListener("keyup", () => {
  const width = ratio.checked // Checking if aspect ratio should be kept
    ? HeightInput.value * OgImageRatio // If yes, calculate width based on height and original ratio
    : WidthInput.value; // If no, keep the existing width value
  WidthInput.value = Math.floor(width); // Set the calculated or existing width
});

// Function to resize and download the image
function ResizeandDownload() {
  const canvas = document.createElement("canvas"); // Creating a magical canvas
  const a = document.createElement("a"); // Creating a magical link
  const ctx = canvas.getContext("2d"); // Getting magical painting powers from the canvas

  canvas.width = WidthInput.value; // Setting canvas width
  canvas.height = HeightInput.value; // Setting canvas height

  const imgQuality = quality.checked ? 0.2 || 0.5 : 1.0; // Checking if image quality should be reduced

  ctx.drawImage(SelectedIMG, 0, 0, canvas.width, canvas.height); // Drawing the selected image on the canvas
  a.href = canvas.toDataURL("image/webp", imgQuality); // Creating a magical link to download the image in .webp format
  a.download = `@your-ehsan_${new Date().getTime()}`; // Naming the downloaded file with a magical name
  a.click(); // Initiating the magical download
}

// Starting the resizing and download process when the magical word is clicked
DownloadBtn.addEventListener("click", ResizeandDownload);

// Loading the selected picture when a picture is chosen
FileInput.addEventListener("change", loadFile);

// Triggering the treasure chest (file input) when the upload box is clicked
UploadBox.addEventListener("click", () => FileInput.click());

I also added extra comments in every point, So that this may be easy for you to understand. 💖

setup ts-reset with next.js (@total-typescript/ts-reset) with 3 simple steps

EHSAN. — Sun, 07 Jul 2024 09:07:50 +0000

ts-reset is a free tool that improves TypeScript's default type definitions. It makes them stricter, more consistent, and easier to use. By using ts-reset, you can prevent bugs related to type errors and make your code easier to read and maintain. It's similar to how css-reset standardizes styles across different browsers. ts-reset was created by Matt Pocock, who also developed Total TypeScript, a series of workshops designed to help you become highly skilled in TypeScript. If you want to master TypeScript, these workshops are highly recommended!

There are Three simple steps to implement ts-reset in the next.js app directory.

Step-1: initialize Next.js app

$ pnpm create next-app
.../Local/pnpm/store/v3/tmp/dlx-5180     |   +1 +
.../Local/pnpm/store/v3/tmp/dlx-5180     | Progress: resolved 1, reused 0, downloaded 1, added 1, done
√ What is your project named? ... .
√ Would you like to use TypeScript? ... No / Yes
√ Would you like to use ESLint? ... No / Yes
√ Would you like to use Tailwind CSS? ... No / Yes
√ Would you like to use `src/` directory? ... No / Yes
√ Would you like to use App Router? (recommended) ... No / Yes
√ Would you like to customize the default import alias (@/*)? ... No / Yes
√ What import alias would you like configured? ... @/*

Step-2: Add ts-reset package

pnpm add -D @total-typescript/ts-reset

Step-3: Add `reset.d.ts`

create a reset.d.ts file in the root of the root of the workspace and then add this single line on it.

This is important to add only this single line in reset.d.ts file.

import "@total-typescript/ts-reset";

And then you are all done.

🙌 Here's the GitHub repo of with sample source code 🌟

How to create diagram of your project's folder structure in 3 simple steps | convert your folder structure to diagram

EHSAN. — Sat, 29 Jun 2024 15:11:23 +0000

Converting your project's folder structure to a diagram can be useful in case of presentation, teaching best practices for the folder structure or it can be a requirement for you to explain your code's structure.

to convert folder structure to the diagram or a flowchart can be done by using many ways such creating manually a graph by following your project's code structure or you can use ChatGPT to solve this problem. But wait! ChatGPT can not create a graph for free right?

So what's the solution?. well that's right free versions of ChatGPT is not able to create a flow chart.

But we can achieve this by following these steps.

Write a raw folder structure text to your readme or save it anywhere.
Create a prompt for ChatGPT to convert this structure to mermaid code.
Convert mermaid graph to easily readable & editable flow chart.

Write raw folder structure

There are many ways to convert your folder structure to text but for now let's keep things simple. I have already created a post in which I clearly mentioned that How you can complete this part so check this out:

📓 how to convert your project's structure to text

Convert to mermaid

After converting your project's folder structure to text you have to convert it to mermaid code So that how you can easily convert it to mermaid graph right.

step 1: Write a prompt

Get your text form of project's structure and tell ChatGPT to convert it to mermaid like this

The code that ChatGPT provided is that

graph TD;
    A[tailwindPostCss]
    A1[assets]
    A1-1[img]
    A2[blog]

    A --> A1
    A1 --> A1-1
    A --> A2

And This mermaid code created this diagram

Although this diagram is not editable by mouse And it is very difficult to add comments and description about your folder structure through mermaid graphs.

But you do not need to worry about it. it's time for the next step.

Convert mermaid to easily editable Flow chart diagram

Now you have mermaid code for the flow chart of your folder structure.

So what you need to do is to go to https://excalidraw.com/

Now click on

more tools
- mermaid to excalidraw (under generate)

now just paste your project structure's mermaid code. on the left input

just like this

After pasting mermaid code your flow chart will be generated to the left.

just click on insert button then it will be available for you on editor.

By creating diagram or flow chart of your project's folder structure to the excalidraw you are allowed to edit it freely and you can also export it as png as well.

How to easily create folder structure in readme markdown with two simple steps

EHSAN. — Thu, 27 Jun 2024 06:47:08 +0000

Learn how you can create a folder structure of your project in your readme file.
creating folder structure of any of your project in the readme file can be very time taking & panful task for many of the developers.

Converting your project's structure to readme file or to a flow chart can be very difficult. If you are thinking to do manually.

But I have a better and time saving method.

prerequisites

You should have CMD (command prompt) (which is available in windows by default)
next you should have knowledge of how CMD works.

Step 1: Go to your project's root

First Go to your project's root and open CMD Command prompt.

then paste this CMD command here.

tree

This will show you a complete list of your project's folder structure

Now You can copy your project's structure using these steps

select structure text using mouse
then press right click of your mouse (Now text should be copied from command prompt)

Now the final results should look like this.

tailwindPostCss
├─── assets
│    └─── img
└─── blog

💡 You may also need to add space between lines, just in case of formatting or you can also do this using ChatGPT to format structure for markdown

Learn how to create a awesome cards component using HTML & CSS only

EHSAN. — Mon, 24 Jun 2024 09:37:44 +0000

In this article you are going to learn some awesome features of CSS by creating this image hover able effects

this component is mainly possible because of this css trick

.list .item:hover + * {
  filter: brightness(0.6);
  transform: translateZ(150px) rotateY(40deg);
}

.list .item:hover + * + * {
  filter: brightness(0.4);
  transform: translateZ(70px) rotateY(20deg);
}

.list .item:hover + * + * + * {
  filter: brightness(0.2);
  transform: translateZ(30px) rotateY(10deg);
}
.list .item:has(+ *:hover) {
  filter: brightness(0.6);
  transform: translateZ(150px) rotateY(-40deg);
}

.list .item:has(+ * + * :hover) {
  filter: brightness(0.4);
  transform: translateZ(70px) rotateY(-20deg);
}

.list .item:has(+ * + * + *:hover) {
  filter: brightness(0.2);
  transform: translateZ(30px) rotateY(-10deg);
}

💡 Did you noticed that :hover + * and :has(+ *:hover) properties of CSS is such a valuable & time saving ⌚ feature.

Just look it we do not need any JavaScript to handle this kind of functionality.

get complete code

To get complete code you can follow this post 👇
https://your-codes.vercel.app/create-a-awesome-and-hover-able-card-component-using-html-and-css-only-with-source-code

Forem: EHSAN.

How to setup the Supabase authentication with Tanstack Router in Vite React.

step by step guide to setup the authentication in vite tanstack router app with supabase

🤯 7 Totally FREE! Mind-Blowing AI Websites You Won’t Believe actually exist

discover a world of endless possibilities, all at your fingertips?

1 — LlamaCoder: Revolutionizing Open-Source Development

2 — V0.dev: Turning Text into UI with AI

3 — AI Jukebox: Your Musical Playground

4 — Websim.ai: Unleash Your Imagination and Build the Web of Tomorrow

5 — 10015.io: Your One-Stop Shop for Dev Tools

6 — What AI Can Do Today: Your AI Tool Guide

7 — AI Comic Factory: Your Digital Drawing Board

🚀 10 Game-Changing Node.js Features You Can't Afford to Miss 🌟

Introduction 🚀

TypeScript Support 🛠️

Built-In Test Runner 🧪

Watch Flag ⏳

Environment File Support 🌍

Promises in Standard Libraries 📜

Top-Level Await ⏩

Glob File Search 🔍

Built-In Debugger 🐞

WebSocket Support 🌐

SQLite Support 🗄️

Conclusion 🎉

Create your own 📷 image compressor & to webp convertor using HTML, CSS, JavaScript from scratch 🚀

What is an image compressor and resizer?

Let's start building

Gathering Magical Tools (DOM Elements):

Storing Original Image Ratio:

Adjusting Width and Height:

Resizing and Downloading the Image:

Additional Triggers and Actions:

Complete main.js file

setup ts-reset with next.js (@total-typescript/ts-reset) with 3 simple steps

Step-1: initialize Next.js app

Step-2: Add ts-reset package

Step-3: Add reset.d.ts

How to create diagram of your project's folder structure in 3 simple steps | convert your folder structure to diagram

Write raw folder structure

Convert to mermaid

step 1: Write a prompt

Convert mermaid to easily editable Flow chart diagram

How to easily create folder structure in readme markdown with two simple steps

prerequisites

Step 1: Go to your project's root

Learn how to create a awesome cards component using HTML & CSS only

get complete code

Step-3: Add `reset.d.ts`