Forem: Yash

Cards mouse hover effect with CSS + JS

Yash — Mon, 27 Feb 2023 10:38:14 +0000

In this blog post we will recreate windows 10 start menu's button hover effects,

you can try the final result on codepen -

1. Create a card with basic stylings.

First of all you need a basic card with some stylings -

<div class="card">
  <h1>Hi dev.to!</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo ut</p>
</div>

.card {
  border-radius: 10px;
  padding: 20px;
  width: 210px;
  height: 150px;
  background: rgb(26,26,26);
}

and I am also gonna add some styling to <body> to position the card in the center, add a better font and change background & text color -

body {
  margin: 0;
  background: black;
  font-family: Verdana, sans-serif;
  color: white;
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
  min-height: 100vh;
  width: 100%;
  gap: 8px;
  flex-wrap: wrap;
}

Now the page should like this -

2. Creating a border

Now we need to create a border which will glow when the mouse comes near it.

But we cant just use css border property for this. Imagine if that property didn't existed? How would you make a border then.

You would add the element inside a <div> with a background.

so we will rename the .card class to .inner and create a new class .card -

.card {
  background: red; /* border color */
  padding : 3px; /* border width */
  border-radius: 12px;
}

and wrap it around the card -

<div class="card">
  <div class="inner">
    <h1>Hi dev.to!</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo ut</p>
  </div>
</div>

And now you have a border -

we are going to keep the border color red for now.

3. Adding Light & Glow Effect

Now we we will create a new element and give it a class .blob -

<div class="card">
  <div class="inner">
    <h1>Hi dev.to!</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo ut</p>
  </div>
  <div class="blob"></div>
</div>

and the element will be positioned absolute -

.blob {
  filter: blur(40px);
  position: absolute;
  z-index: -1; /* to keep it at below everything else */
  top: 0; /* to align it at top */
  left: 0; /* to align it at left */
  width: 250px;
  height: 250px;
  border-radius: 50%; /* to make it circular */
  background: rgb(255, 255, 255, 0.5);
}

Now the blob should appear on top-left of the window -

but we wanted it to be on the top-left of the card.

The reason it went on the top-left of the window is because the absolute positioned element needs a non-static position element to position themselves along.

Since it didn't find any non-static elements it position itself along the <body>.

so to fix it add a position: relative; to the .card class -

.card {
  background: red;
  padding : 3px;
  border-radius: 12px;
  position: relative;
}

Now it should position itself along the .card.

But now the the glow is escaping out of the card, which we don't want.

You might think, we also want other cards near it to glow. But we only want the border of surroundings to glow, and now the card is just spreading the light everywhere. Instead every card will have their own light which will go towards the mouse and glow their borders.

So, we will add overflow: hidden; to .card class to stop it from spreading out, and we will also change the border color to
background: rgb(128 128 128 / 0.2);, so that we can actually see the glow

.card {
  background: rgb(128 128 128 / 0.2);
  padding : 3px;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

Now you should be able to see the glow -

4. Making the blob follow the mouse.

Now we will start writing some javascript!

first of all you need another element with a class .fakeblob -

<div class="card">
  <div class="inner">
    <h1>Hi dev.to!</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo ut</p>
  </div>
  <div class="blob"></div>
  <div class="fakeblob"></div>
</div>

.fakeblob {
  display: hidden;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

we just need this because we need the original position of the blob, and thats why its display: hidden;.

But why can't we save the original in a JS variable, and use it later on? We can't because the blob's original position might change like on scroll and zoom in/out, so we used a fakeblob.

Now the Javascript part!

First of all we will fetch all our card elements and save it in a variable -

const allCards = document.querySelectorAll(".card");

Then we will add add an eventListener, which will listen to mouse movement, inside it we will loop through all of the cards and fetch its .blob and .fakeblob childrens -

window.addEventListener("mousemove", (ev) => {

  allCards.forEach((e) => {
    const blob = e.querySelector(".blob");
    const fblob = e.querySelector(".fakeblob");
  });
});

then we will getBoundingClientRect() of the fakeblob which will return an object providing information about the size of an element and its position relative to the viewport -

allCards.forEach((e) => {
  const blob = e.querySelector(".blob");
  const fblob = e.querySelector(".fakeblob");

  const rec = fblob.getBoundingClientRect();
});

now we will animate the blob using the web animation api -

blob.animate(
  [{
      transform: `translate(${ev.clientX - rec.left - (rec.width / 2)}px,${ev.clientY - rec.top - (rec.height / 2)}px)`,
  }],
  {
    duration: 300,
    fill: "forwards",
  }
);

here we are animating it for the duration - 300ms and fill - forwards means that the element will keep the styles of the last keyframe.

and in the animation we are translating it by the difference between mouse position and fake blob position.

And we also subtracting it by half of its height in y axis and half of width in x axis. The reason for this is to make the blob move to the center of the mouse.

without it the blob would move like this -

and with it it would move like this -

Now try moving your mouse near the card -

add few more cards and see the magic!

5. Additional effects

Now when you hover the cards it does nothing & its kinda boring so lets add a glow effect following the mouse -

first we will add a transition property to smoothly transition into the :hover state

.inner {
  /* ... */
  transition: background 300ms ease-in-out;
}

and on .card:hover we will change the background opacity and add a backdrop blur -

.card:hover > .inner {
  background: rgb(26, 26, 26, 0.6);
  backdrop-filter: blur(80px);
}

and now -

And there you have it!

Thanks for reading the blog! I hope it helped you :)

Write and deploy blogs in seconds with comments support

Yash — Wed, 01 Jun 2022 14:00:33 +0000

A few days ago I wrote my first blog and wanted to make a website for it. So I made one using Next.js and MDX. While making it I got an idea. What if you could just write a blog in github and it will appear automatically in a website. So I did just that. created a Github app which listens for push events and automatically updates the website, and also added comments support using giscus

This blog will teach you how to set it up.

First create a repository. its need to public, then go the website and log in with github. then pick the repo u created, and install the app, and there you go - u can see your blog here - https://blogs-for-u.vercel.app/u/<github_username>

Attributes

You can add attributes like this

data:
  - title: Blog Title
  - dsc: Blog Description
  - date: 2022-06-01 # year-month-day format (ISO 8601)
  - meta:
    - title: Meta Title
    - description: Meta Description
    - image: Meta Image
---

Make sure to add --- after the attributes (even if there are no attributes)

Comments

Now at the bottom of the blog u might see an error

giscus not installed on this repository

This is because giscus is not set up

First install the giscus app then enable discussion on the repository (Settings > Scroll Down > Enable Discussion). After that go back to the blogs and You should see the comments.

If you like this app you considering starring ⭐ the repo

How I made a completely Anonymous chat app with go and next.js

Yash — Thu, 26 May 2022 17:59:40 +0000

URL := https://buga-chat.vercel.app/
REPO := https://github.com/kekda-py/buga-chat
BACKEND := https://github.com/kekda-py/buga-backend

So I was learning go the other day. And was amazed by its channels. So decided to make something in it. Actually I thought making this app before I was learning go and wrote it half in python but decided to make it go cuz umm go is cool af.
also I made this thing before ===> dotenv check it out

So umm my friend nexxel told me about this library fiber its like quart (async flask) for go. While browsing through their docs I found that you can make websockets with them. After that I literally scrapped the python code and started writing it in go.

Websocket Hub

Since I was amazed by go channels. I used them to make a websocket hub. If u dont know how channels works. Here's a simple explanation.

Go Channels

Channels are a typed conduit through which you can send and receive values with the channel operator, <-.

ch <- v    // Send v to channel ch.
v := <-ch  // Receive from ch, and
           // assign value to v.

Like maps and slices, channels must be created before use: c := make(chan T)

Channels with Select

The select statement lets a goroutine wait on multiple communication operations.

A select blocks until one of its cases can run, then it executes that case. It chooses one at random if multiple are ready.

tick := time.Tick(100 * time.Millisecond)
boom := time.After(500 * time.Millisecond)
for {
  select {
    case <-tick:
      fmt.Println("tick.")
    case <-boom:
      fmt.Println("BOOM!")
      return
    default:
      fmt.Println("    .")
      time.Sleep(50 * time.Millisecond)
  }
}

Output:

    .
    .
tick.
    .
    .
tick.
    .
    .
tick.
    .
    .
tick.
    .
    .
tick.
BOOM!

I definitely didn't copied all this from Go Tour. What are you talking about?

Using this I made the websocket hub
At First I declared three channels for communication between hub and the websocket and a map for storing connections

var connections = make(map[*websocket.Conn]client)
var register = make(chan *websocket.Conn)
var broadcast = make(chan message)
var unregister = make(chan *websocket.Conn)

and a message struct for broadcasting

type struct message {
  content string
  by      *websocket.Conn
}

then in the Hub I made a select statement with the channels as the cases :-

for {
  select {
  case c := <- register {}
  case m := <- broadcast {}
  case c := <- unregister {}
  }
}

<- register just adds the connection to connections

case c := <-register:
  connections[c] = client{}
  log.Println("client registered")

<- broadcast takes a type message which has a by attribute of type *websocket.Conn. It loops through the connections and checks if the user is the one who sent the message. If it is then it just continues (skip to the next iteration). If its not then it sends the message.
The reason I made it like this. cuz if u send the message it was taking few seconds to appear. so in the frontend it adds the message instantly.

case m := <-broadcast:
  for c := range connections {
    if c == m.by {
      continue
    }
    if err := c.WriteMessage(websocket.TextMessage, []byte(m.content)); err != nil {
      log.Println("Error while sending message: ", err)

      c.WriteMessage(websocket.CloseMessage, []byte{})
      c.Close()
      delete(connections, c)
    }
  }

<- unregister just removes the connection from connections

case c := <-unregister:
  delete(connections, c)
  log.Println("client unregistered")

now the websocket hub is done we just have to run it

go WebsocketHub()

now in the websocket we just have to register and also defer unregister

register <- c

defer func() {
  unregister <- c
  c.Close()
}

and check for message

for {
  mt, m, err: = c.ReadMessage()
  if err != nil {
    if websocket.IsUnexpectedCloseError(err, websocket.CloseGoingAway, websocket.CloseAbnormalClosure) {
      log.Println("read error:", err)
    }

    return // Calls the deferred function, i.e. closes the connection on error
  }

  if mt == websocket.TextMessage {
    // MakeMessage(string(m), c)
    broadcast < -message {
      content: string(m),
      by: c,
    }
  } else {
    log.Println("websocket message received of type", mt)
  }
}

now the backend is done lets move to frontend

Frontend

I used Next.js with chakra-ui for this project.
for the websocket connection I used react-use-websocket.

So first I added two states :-

const [messages, setMessages] = useState<Messages>({});
// ^^^ for the active messages
const [msg, setMsg] = useState<string>('');
// ^^^ value of text in the message input

the Messages interface is just

interface Messages {
  [key: string]: msg;
}

and msg :-

interface msg {
  byU : boolean;
  content : string;
}

now time to run your backend
then add an environment variable NEXT_PUBLIC_BACKEND_URL with your backend url to .env.local . you can use

dotenv change NEXT_PUBLIC_BACKEND_URL the url --file .env.local

if u have dotenv installed. then get that url by process.env.NEXT_PUBLIC_BACKEND_URL and connect with it using

const { sendMessage, lastMessage, readyState} = useWebSocket(`wss://${BACKEND}/ws`, { shouldReconnect : (closeEvent) => true } );

make sure to import useWebsocket along with ReadyState

import useWebSocket, { ReadyState } from 'react-use-websocket';

now connectionStatus :-

const connectionStatus = {
  [ReadyState.CONNECTING]: 'Connecting',
  [ReadyState.OPEN]: 'Open',
  [ReadyState.CLOSING]: 'Closing',
  [ReadyState.CLOSED]: 'Closed',
  [ReadyState.UNINSTANTIATED]: 'Uninstantiated',
}[readyState];

For messages, I looped through the keys using Object.keys and used .map() to render all of them.

{Object.keys(messages).map((key: string) => {
    if (messages[key] === undefined || messages[key] === null) return null;
    if (messages[key].content === undefined || messages[key].content === null)
      return null;

    return (
      <Box
        key={key}
        borderRadius="lg"
        bg="teal"
        color="white"
        width="fit-content"
        px="5"
        py="2"
        ml={messages[key].byU ? "auto" : "0"}
      >
        {messages[key].content}
      </Box>
    )
  }
)}

if the message is sent by you. the marginLeft is set to auto which pushes it all the way to right side.

now time for checking for messages. we just use a useEffect hook with lastMessage as dependency.

useEffect(() => {
  if (lastMessage !== undefined || lastMessage !== null) {
    (function (m: string) {
      setMessages((prev: Messages) => {
        let id = getUID();
        while (prev[id] !== undefined || prev[id] !== undefined) {
          id = getUID();
        }
        setTimeout(() => {
          deleteMessage(id);
        }, 1000 * 60);
        return {
          ...prev,
          [id]: {
            byU: false,
            content: m,
          },
        };
      });
      if (mute) return;
      new Audio("ping.mp3").play();
    })(lastMessage?.data);
  }
}, [lastMessage]);

I am using Date.now() for the ids. and also setting a timeout for 1 min which runs the deleteMessage function :-

function deleteMessage(id: string) {
  setMessages((prev) => {
    const newMessages = { ...prev };
    delete newMessages[id];
    return newMessages;
  });
}

now for sending messages we create another function which just sends the message using sendMessage which we got from useWebsocket hook :-

function Send() {
  if (
    msg.length < 1 ||
    connectionStatus !== "Open" ||
    msg === undefined ||
    msg === null
  )
    return;

  sendMessage(msg);
  newMessage(msg, true);
  setMsg("");
}

and on Enter we run it
onKeyUp={(e : any) => { if (e.key === "Enter") { Send() } }}

this is a prop on the input element.

and now there you go u made a completely Anonymous chat app.

run

yarn dev

to run the app in development mode