DEV Community: plsankar

Clip-Path Circle Reveal Animation With Mouse Movement

plsankar — Tue, 03 Dec 2024 17:07:43 +0000

What’s the Plan?

We’ll create an animation where an image is revealed through a circle that moves with your mouse. You’ll also be able to tweak the size of the circle and experiment with the behavior.

Here’s what you’ll need:

GSAP: For buttery-smooth animations.
Tweakpane: For a slick UI to adjust the animation on the fly.
HTML & CSS: To set up and style the page.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Clip-Path Animation</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <img 
    src="https://images.unsplash.com/photo-1696149328298-6e2f257bd45a?q=80&w=2104&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" 
    alt="Clip-path animation">
  <script src="script.js"></script>
</body>
</html>

CSS

body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  overflow: hidden;
}

img {
  width: 100%;
  height: auto;
  clip-path: circle(var(--size, 10%) at var(--x, 50%) var(--y, 50%));
  transition: clip-path 0.6s;
}

JS

import gsap from "https://esm.sh/gsap";

// Smooth animations
const xTo = gsap.quickTo("img", "--x", { duration: 0.6, ease: "power3" });
const yTo = gsap.quickTo("img", "--y", { duration: 0.6, ease: "power3" });
const sizeTo = gsap.quickTo("img", "--size", { duration: 0.6, ease: "power3" });

// Update based on mouse movement
window.addEventListener("mousemove", (e) => {
  xTo((e.clientX / window.innerWidth) * 100);
  yTo((e.clientY / window.innerHeight) * 100);
});

Preview

Tab Closer Pro v1.0.1: Sorting, and Search Features

plsankar — Sat, 29 Jun 2024 18:31:15 +0000

This update brings significant enhancements to the extension, making it even easier to manage your browser tabs. Here's a closer look at what's new in this release.

What's New in Version 1.0.1?

Updated User Interface

The new and improved UI offers is based on the shadcn/ui.

Sort by Tabs Count

With the new "Sort by Tabs Count" feature, you can quickly see your open websites based on the number of tabs associated with each. This allows you to identify and manage the most cluttered sites efficiently.

Added Search Feature

Say goodbye to endless scrolling! The new search feature lets you instantly find specific websites among your open tabs. Just type in the name of the website, and Tab Closer Pro will display all related tabs, saving you time and effort.

Follow me on GitHub for the latest updates, submit issues, and check out the package.json for more details. If you have any questions or feedback, don't hesitate to reach out through the GitHub issues page.

Source Code: Github

Install the extension: Chrome Webstore

Lucide Icons for VS Code [Unofficial]

plsankar — Fri, 03 May 2024 18:32:30 +0000

Hey there,

You know that feeling when you're in the flow, coding away, and then you realize you need an icon? Instead of interrupting your rhythm to hunt one down online, now you can just grab it from within VS Code.

I made this extension because, well, I needed it myself. And I figured, hey, if it helps me, it might just help you too.

So if you're tired of the back-and-forth between your code and your browser, give it a shot. It's free, it's easy, and it's made with a whole lot of love.

Download it now from the Visual Studio Code Marketplace and let's make coding a little smoother, one icon at a time.

And its also open source.

VSCode: https://marketplace.visualstudio.com/items?itemName=Lakshmisankar.vscode-lucide-icons

Repo Link: https://github.com/plsankar/vscode-lucide-icons

Introducing Tab Closer Pro: Close Tabs More Easily

plsankar — Tue, 05 Mar 2024 18:43:25 +0000

Hey everyone! Do you ever find yourself drowning in a sea of open tabs while browsing? I know I do!.

Tab Closer Pro simplifies your browsing by organizing all your tabs by domain. No more endless scrolling to find that one tab buried in the chaos! With Tab Closer Pro, everything is neatly grouped together, making it super easy to navigate and manage your tabs.

But here's the best part – with just a click, you can close all tabs from a specific domain. It's like magic for decluttering your browser!

So if you're tired of tab overload and want to take back control of your browsing, give Tab Closer Pro a try.

Its also a open source project. the source code can found at github.

Source Code: Github

Install the extension: Chrome Webstore

How to find all the colors used in a Webpage

plsankar — Thu, 11 Jan 2024 18:59:33 +0000

This is write up of how i created this chrome extension called ColorHunter. The project is also open source, you can find it here: Github.

What we are going to see is the part where we scan all the elements in the webpage and find all the colors.

Step 1: How to get all elements in a webpage?

Simple, the following code will get all the elements in the page and runs a foreach loop on them.

const allElments = document.querySelectorAll<HTMLElement>("*");
allElments.forEach((element) => {
    console.log(element)
});

Step 2: How to get all the colors in a HTML element?

We are using the window.getComputedStyle()method.

const style = window.getComputedStyle(element);
style.color // text color
style.backgroundColor // background color

Step 3: Putting it all these together.

const colors: string[] = [];
const allElments = document.querySelectorAll<HTMLElement>("*");
allElments.forEach((element) => {
    const style = window.getComputedStyle(element);
    colors.push(style.color);
    colors.push(style.backgroundColor);    
});

That’s all.

Project: [Github] [Chrome Extension]

Mine: [Portfolio] | [Github]

FileOrganizer: Organize your files in a simple command

plsankar — Sat, 14 Jan 2023 05:38:27 +0000

I created this nodejs cli program to organize your files.

The Problem:

Every day at the end of the day my downloads folder gets messy and unorganized. So I used to reorganize the folders. and after a while, I didn't want to do it manually. that is why I created this program.

The Planning:

After a little analyzing, I came to the conclusion that if I can put my files in the same file type folder and add a date to them, I can easily manage them.

The Solution

I know there may be other libs like this available. But I wanted to create my own. and with little knowledge of the batch script, I started the first version in a batch script. but I had problems making this work in other operating systems. That was when I started using javascript and node js.

So now i present you FileOrganizer.

Do Like, Share your feedback 🙌 and contributions are welcome.

Feel free to connect with me 👍