DEV Community: Jash Gopani

Disk space management in Linux: 3 Easy steps

Jash Gopani — Wed, 23 Oct 2024 23:46:28 +0000

Recently I encountered a situation when my VM was running low on disk space and I had to free up some space using CLI. Below are the 3 simple steps that anyone can follow to do the same on a Linux machine.

My VM had Red Hat Enterprise Linux (RHEL) installed on it but the commands are common to all Linux distributions.

Step 1 - Check the free space on disk

Use the df command with the -h argument which makes the output human readable i.e. it shows the values in MBs and GBs instead of bytes

Command and Output

(base) [jbgopani@vclvm178-31 ~]$ df -h
Filesystem                                                 Size  Used Avail Use% Mounted on
devtmpfs                                                   4.0M     0  4.0M   0% /dev
tmpfs                                                       25G     0   25G   0% /dev/shm
tmpfs                                                      9.8G   33M  9.8G   1% /run
/dev/vda3                                                  120G   74G   46G  62% /

Since we have not specified any path here, this command will output the free and used space on all the disks mounted to the VM

Looking at the output we can get an idea of which drives are full and need to be cleaned up. Let's say I want to free up space on /dev/vda3 disk partition which is mounted to the path /. Next step is looking at the disk usage of the files and folders in that location

Step 2 - Checking Disk Usage

Command and output

(base) [jbgopani@vclvm178-31 ~]$ du -h / --max-depth=1 2>/dev/null
337M    /boot
0       /dev
0       /proc
752K    /run
0       /sys
76G     /tmp
26M     /etc
4.0K    /root
888M    /var
7.3G    /usr
0       /afs
46G     /home
.
.
.

The du command gives us the disk usage of each file / folder.
-h - For human readable format like before
/ - The path where we want to check disk usage (can be any path)
--max-depth=1 - This is very important, else by default this command would recursively go through all sub paths and print out information which is not something we want
2>/dev/null - This part is optional. The purpose of this is to discard any error message outputs from the stderr or error message stream. This is a standard way to discard error messages of a command in linux. The purpose of writing this here is to avoid any Permission denied errors for any files or folders which you might see if the VM is shared among multiple users

Use this command repeatedly to identify which folders are occupying the most space

Optionally, you can also sort the output of this command in decreasing order of disk usage

(base) [jbgopani@vclvm178-31 ~]$ du -h /home/jbgopani/ --max-depth=1 2>/dev/null | sort -hr
34G     /home/jbgopani/
15G     /home/jbgopani/miniconda3
5.6G    /home/jbgopani/Projects
5.6G    /home/jbgopani/pipelines
3.1G    /home/jbgopani/.vscode-server
2.1G    /home/jbgopani/.cache
924M    /home/jbgopani/Downloads
637M    /home/jbgopani/.nextflow
613M    /home/jbgopani/.etetoolkit

Step 3 - Remove unwanted files

Now that we know which files/folders need to be cleaned up, remove them using the rm command

Example

rm -rf /home/jbgopani/Projects/tempProject

Hope you find this quick tutorial useful. Let me know in the comments if you have any feedback/suggestions

Choose the correct color palette for your next project!

Jash Gopani — Wed, 23 Jun 2021 11:38:56 +0000

Hello guys,🙋‍♂️
this short article is about my recent side project called

COLORINATOR

It is a quick color palette generator based on the 60-30-10 rule of UI design. You can use the color palettes generated by this website for any kind of project; apps, website, ppts and almost everywhere.

One of the main highlight is that you can see the real time preview of the theme colors! This will help you to get an idea of which color combination works best for your project.

Because this website is responsive, you will have no trouble using it from any device.

Motivation

I used to get confused about what color scheme should I use for my projects. There are numerous colour palette generators available, but the problem is that most of those provide too many possibilities, and many of them just produce random colours that may or may not work well together.

To minimize this ambiguity, I developed this simple solution, which selects a primary color based on user input or at random, and then derives secondary and accent colors depending on the contrast ratio.

60-30-10 rule

To explain you in short, use a main/primary color on 60% of your elements as a theme color. Out of remaining 40%, you can use a secondary color on 30% elements which need user attention or provide valuable information to user. The rest 10% will be action elements which can be colored with Accent color to give them a distinct look from the rest of the elements.

If you observe carefully, the primary color is used as background color. Secondary color is almost white with slight tint of primary color...which is used for elements that require user focus like the user input field. The Accent color is used to highlight the website footer.
On inverting the theme, the primary and secondary colors are swapped and applied the same way.
With this type of theming, you can get an idea of how you can use the colors in your project.

So where do you get these colors from ?

The user can provide a main color which is intended to be used as a primary color for the project or the user can go for a random color as primary color using the random button.
On getting the primary color, the app calculates the font color for the website and the secondary and accent colors that go with the primary color.
How does it calculate secondary and accent colors ? The answer lies in this article

Apart from this, the accent color is either calculated based on the logic mentioned in the article or the color opposite to the primary color is picked from the color wheel.

Best way to use this ?

Get a primary color of your choice from anywhere on the net. Paste the primary color hex code in the input field and voila! You will get the most suitable secondary and accent color combination for your primary color.
Also, if you hit enter for the same hex code, you will get slight variations for secondary and accent colors too.
I have very well documented everything on in my github readme. If still you have any doubts/ suggestions you can comment them below and I'll get back to you😉

Features to be added

Copy button on saved theme palettes, to individually copy the hex code to clipboard
Import and export themes
You suggest

Do use this app for your upcoming projects and let me know what better can be done. Thank you!

Windows 10 calendar hover effect using HTML, CSS, and vanilla JS

Jash Gopani — Wed, 28 Apr 2021 14:35:10 +0000

Introduction
Observations
Getting Started
Fine Tuning Grid Effect
Additional Resources

Introduction

Welcome back devs! In this 3rd and final part of this series, I will explain to you how you can create your own version of the windows 10 calendar. The implementation logic is 80% similar to the grid hover effect logic.
So, if at any point you feel as if you don't understand what's going on, I recommend that you first read Part 2 of this series and then return here. With that said, let us check the final output first!

ℹ This article is a little elaborative but that's for beginners, if you are already good at JS and if you know the Grid hover logic you can quickly go through the code to understand what's going on.

Observations

Undoubtedly, the Grid hover effect is used here, but more than one element's border is highlighted in each direction around the cursor i.e element behind an element is also highlighted
The dates do not have Button hover effect
The grid hover effect does not apply to the active date (today's date) element.
The active Date has a gap between the border and background by default. If some other date is selected, the gap is eliminated.
Clicked date which is a non-active date, will have only a colored border
Border of the active element is illuminated

Getting Started

As you might have guessed, I will start with the grid effect code.

The First 7 elements of the grid are week names and rest dates. Since the calendar shows 42 dates at once, hence I have added 42 win-btn elements in win-grid. Some dates are inactive and one of them is active, so I have added classes accordingly.

HTML

<html>

<head>
  <title>Windows 10 calendar hover effect</title>
</head>

<body>
  <h1>Windows 10 Calendar hover effect</h1>
  <div class="win-grid">
    <p class="week" id="1">Mo</p>
    <p class="week" id="2">Tu</p>
    <p class="week" id="3">We</p>
    <p class="week" id="4">Th</p>
    <p class="week" id="5">Fr</p>
    <p class="week" id="6">Sa</p>
    <p class="week" id="7">Su</p>
    <div class="win-btn win-btn-inactive" id="40">29</div>
    <div class="win-btn win-btn-inactive" id="41">30</div>
    <div class="win-btn win-btn-inactive" id="42">31</div>
    <div class="win-btn" id="1">1</div>
    <div class="win-btn" id="2">2</div>
    <div class="win-btn" id="3">3</div>
    <div class="win-btn" id="4">4</div>
    <div class="win-btn" id="5">5</div>
    <div class="win-btn" id="6">6</div>
    <div class="win-btn" id="7">7</div>
    <div class="win-btn" id="8">8</div>
    <div class="win-btn" id="9">9</div>
    <div class="win-btn" id="10">10</div>
    <div class="win-btn" id="11">11</div>
    <div class="win-btn" id="12">12</div>
    <div class="win-btn" id="13">13</div>
    <div class="win-btn" id="14">14</div>
    <div class="win-btn" id="15">15</div>
    <div class="win-btn" id="16">16</div>
    <div class="win-btn win-btn-active" id="17">17</div>
    <div class="win-btn" id="18">18</div>
    <div class="win-btn" id="19">19</div>
    <div class="win-btn" id="20">20</div>
    <div class="win-btn" id="21">21</div>
    <div class="win-btn" id="22">22</div>
    <div class="win-btn" id="23">23</div>
    <div class="win-btn" id="24">24</div>
    <div class="win-btn" id="25">25</div>
    <div class="win-btn" id="26">26</div>
    <div class="win-btn" id="27">27</div>
    <div class="win-btn" id="28">28</div>
    <div class="win-btn" id="29">29</div>
    <div class="win-btn" id="30">30</div>
    <div class="win-btn win-btn-inactive" id="31">1</div>
    <div class="win-btn win-btn-inactive" id="32">2</div>
    <div class="win-btn win-btn-inactive" id="33">3</div>
    <div class="win-btn win-btn-inactive" id="34">4</div>
    <div class="win-btn win-btn-inactive" id="35">5</div>
    <div class="win-btn win-btn-inactive" id="36">6</div>
    <div class="win-btn win-btn-inactive" id="37">7</div>
    <div class="win-btn win-btn-inactive" id="38">8</div>
    <div class="win-btn win-btn-inactive" id="39">9</div>
  </div>
</body>

</html>

Inside CSS, we change the number of columns in the grid to 7 and add the following classes : win-btn-inactive,win-btn-active,win-btn-selected.

CSS

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100&display=swap");

* {
  box-sizing: border-box !important;
  color: white;
  text-transform: capitalize !important;
  font-family: "Noto Sans JP", sans-serif;
  letter-spacing: 2px;
}

body {
  background-color: black;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
}

.win-grid {
  border: 1px solid white;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 0.2rem;
  align-items: stretch;
  text-align: center;
  padding: 2rem;
  cursor: default;
}

.win-btn {
  padding: 1rem;
  text-align: center;
  border-radius: 0px;
  border: 3px solid transparent;
}

/* Today's Date */
.win-btn-active {
  background: red;
}

/* Other Month's Date */
.win-btn-inactive {
  color: #ffffff5f;
}

/* Clicked Date */
.win-btn-selected {
  border: 3px solid red;
}

button:focus {
  outline: none;
}

And the JS code will be almost the same except for the win-btn event listeners. We don't need those anymore. Also, since we added more classes to the elements, we cannot just directly compare the className in the grid hover event... We need to check if the class exists in the element's classList.

JS

const offset = 69;
const angles = []; //in deg
for (let i = 0; i <= 360; i += 45) {
  angles.push((i * Math.PI) / 180);
}
let nearBy = [];

function clearNearBy() {
  nearBy.splice(0, nearBy.length).forEach((e) => (e.style.borderImage = null));
}

const body = document.querySelector(".win-grid");

body.addEventListener("mousemove", (e) => {
  const x = e.x; //x position within the element.
  const y = e.y; //y position within the element.

  clearNearBy();
  nearBy = angles.reduce((acc, rad, i, arr) => {
    const cx = Math.floor(x + Math.cos(rad) * offset);
    const cy = Math.floor(y + Math.sin(rad) * offset);
    const element = document.elementFromPoint(cx, cy);

    if (element !== null) {
      console.log("cursor at ", x, y, "element at ", cx, cy, element.id);
      if (
        element.classList.contains("win-btn") &&
        acc.findIndex((ae) => ae.id === element.id) < 0
      ) {
        const brect = element.getBoundingClientRect();
        const bx = x - brect.left; //x position within the element.
        const by = y - brect.top; //y position within the element.
        if (!element.style.borderImage)
            element.style.borderImage = `radial-gradient(${offset * 2}px ${offset * 2}px at ${bx}px ${by}px ,rgba(255,255,255,0.7),rgba(255,255,255,0.1),transparent ) 9 / 1px / 0px stretch `;
        return [...acc, element];
      }
    }
    return acc;
  }, []);
});

body.onmouseleave = (e) => {
  clearNearBy();
};

This is how our initial calendar looks like

Fine Tuning Grid Effect

As you can see, the grid effect works but we need to fix some bugs and do some state management. Let us go through each bug and discuss its solution.

Problem 1 - Element very close to the cursor is not highlighted

Very strange right! When the cursor is very very close to an element, its target is the win-grid element only, so ideally all the nearby elements must be highlighted. But what is happening here, can you guess the cause?

For those who still did not get it, the offset value is larger than the nearby element and hence, the element which is shown in blue is not getting highlighted! To fix this we need to reduce the offset value to a closer one....but if the offset is less than the element's dimensions, how will it reach the nearby 8 elements?

Solution 1

What we can do is, we can target 2 points on each offset line instead of just targeting the endpoint. The first point might be very near to the center and the second will be the endpoint only.

And while writing this article, I just realized that there is room for some optimization also! In grid effect, we were calculating 8 values, according to my new approach we would have to calculate 16 values! As you can see, we can skip some "first point" calculations i.e the points that are near to the center and whose main purpose is to detect extremely nearBy elements.
So we will only calculate 4 nearBy points, hence total 12 point calculations per mouse movement instead of 8.

Problem 2 - The gap between the border and background of active date

This might not sound like a big problem but think about it. How would you do it? The most obvious thought that comes to our mind is that wrap each win-btn element inside a div and apply border effects to the outer container element.
But doing this will increase the number of elements in our DOM, moreover, we will also have to change the elements which we are detecting, in our code.
So, every time we move the cursor, we would get a nearby win-btn element, and then we would have to change the style of its parent Element. We also need to add the scenario when the mouse moves over the container element and such minor event handling of new elements added to our DOM.
This way we are just adding more and more event listeners which can be avoided...

Solution 2

There is a CSS property, which helps us do exactly what we want. It is called background-origin.
According to MDN Docs, The background-origin CSS property sets the background's origin: from the border start, inside the border, or inside the padding.
The default value is border-box, which means that the background starts from where the border ends.
We will use content-box value because this will allow us to use the padding region of the box model as a gap between the border and the background!

Remaining logic

Now the only thing remaining is the minor state handling for the selected date. We need to remember the previously selected element so that when a new date is selected, we first clear the border of the previous element and add then add the border to our new element.
What we will do is we will create a CSS class that has the border styling and add or remove the class from the element as required.

/* Clicked Date */
.win-btn-selected {
  border: 3px solid red;
}

If any date other than the active date is selected, the background of the active date expands till border (like its usual behaviour). So we will make a class for that also ; win-btn-active-unselected which will change the background-origin back to border-box.

/* Today's Date when some other date is clicked*/
.win-btn-active-unselected {
    background-origin: border-box;
}

The Final Code

CSS

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100&display=swap");

* {
  box-sizing: border-box !important;
  color: white;
  text-transform: capitalize !important;
  font-family: "Noto Sans JP", sans-serif;
  letter-spacing: 2px;
}

body {
  background-color: black;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
}

.win-grid {
  border: 1px solid white;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 0.2rem;
  align-items: stretch;
  text-align: center;
  padding: 2rem;
  cursor: default;
}

.win-btn {
  padding: 1rem;
  text-align: center;
  border-radius: 0px;
  border: 3px solid transparent;
  background-origin: content-box;
}

/* Today's Date */
.win-btn-active {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.2rem;
    border: 3px solid red;
  background: center linear-gradient(red, red) no-repeat;
    background-origin: content-box;
}

/* Today's Date when some other date is clicked*/
.win-btn-active-unselected {
    background-origin: border-box;
}

/* Other Month's Date */
.win-btn-inactive {
  color: #ffffff5f;
}

/* Clicked Date */
.win-btn-selected {
  border: 3px solid red;
}

.win-btn:hover {
  border: 3px solid rgba(255, 255, 255, 0.4);
}

.win-btn-active:hover {
  border: 3px solid hsl(0, 90%, 75%);
}

.win-btn-selected:hover {
  border: 3px solid hsl(0, 70%, 50%) !important;
}

button:focus {
  outline: none;
}

JS

const offset = 69;
const borderWidth = 3;
const angles = []; //in  rad
for (let i = 0; i <= 2; i += 0.25) {
  angles.push(Math.PI * i);
}
let nearBy = [];
let activeBtn = document.querySelector(".win-btn-active");
let lastClicked = null;

document.querySelectorAll(".win-btn").forEach((btn) => {
  btn.onclick = (e) => {
    //clear effects from last clicked date and set lastClicked to current item
    if (lastClicked) {
      lastClicked.classList.remove("win-btn-selected");
    }
    lastClicked = e.currentTarget;

    activeBtn.classList.toggle(
      "win-btn-active-unselected",
      e.currentTarget.id !== activeBtn.id
    );
    e.currentTarget.classList.add("win-btn-selected");
  };
});

function clearNearBy() {
  nearBy.splice(0).forEach((e) => (e.style.borderImage = null));
}

const body = document.querySelector(".win-grid");

body.addEventListener("mousemove", (e) => {
  let x = e.clientX; //x position of cursor.
  let y = e.clientY; //y position of cursor

  clearNearBy();

  nearBy = angles.reduce((acc, rad, index, arr) => {
    const offsets = [offset * 0.35, offset * 1.105];

    const elements = offsets.reduce((elementAccumulator, o, i, offsetArray) => {
      if (index % 2 === 0 && i === 0) return elementAccumulator;
      const cx = Math.floor(x + Math.cos(rad) * o);
      const cy = Math.floor(y + Math.sin(rad) * o);
      const element = document.elementFromPoint(cx, cy);
      // console.log("element at", x, y, cx, cy, offsets, (rad * 180) / Math.PI);
      if (
        element &&
        element.classList.contains("win-btn") &&
        !element.classList.contains("win-btn-active") &&
        !element.classList.contains("win-btn-selected") &&
        elementAccumulator.findIndex((ae) => ae.id === element.id) < 0
      ) {
        const brect = element.getBoundingClientRect();
        const bx = x - brect.left; //x position within the element.
        const by = y - brect.top; //y position within the element.
        const gr = Math.floor(offset * 1.7);
        if (!element.style.borderImage)
          element.style.borderImage = `radial-gradient(${gr}px ${gr}px at ${bx}px ${by}px ,rgba(255,255,255,0.3),rgba(255,255,255,0.1),transparent ) 9 / ${borderWidth}px / 0px stretch `;
        console.log("element at", offsets, (rad * 180) / Math.PI, element);

        return [...elementAccumulator, element];
      }
      return elementAccumulator;
    }, []);

    return acc.concat(elements);
  }, []);
});

body.onmouseleave = (e) => {
  clearNearBy();
};

Quick Code Explanation

Instead of converting degrees to radians, I am directly calculating angles in radians (0, PI/4, PI/2, 3PI/4... 2PI).
The win-btn's event handler takes care of the currently selected element. One small change I have done here is that I use theclassListproperty to add and remove classes instead of manually changing the CSS styles using thestyle` property because the properties we want to change have static values, unlike border-image which has radial gradient at the cursor position.

classList.toggle()

The classList.toggle() method removes the class from the element if the 2nd argument evaluates to false else adds the class to the element.
Since at a given angle we check for elements at 2 points on the offset line (green lines in the figure above), I store the offset values into an array called offsets.
I did this so that we can iterate over the 2 values and check for an element at each value. This way we can extend this method to calculate more than 2 points and detect more elements for a particular angle value; for this case,2 offset values are fine.
So the offsets.reduce() method returns those 2 elements only. I have shifted the element selection and styling code inside the offsets.reduce() method only to avoid another iteration over elements just for styling them.
If there are no elements at a particular angle then the elements array will be empty.

Note: The offset values I have used give an almost an original-like effect and are trial and error based. You can play around with those values to get the look you like.

Finally just add the elements into the accumulator and return.

Thank you! 😁

With this, we come to the end of this series of Recreating Windows Effects

Feel free to post suggestions, doubts, or any other feedback in the comment section below. Also, please do let me know, how much easy or difficult it was for you to understand all 3 articles.

Additional Resources

You can refer to the additional resources mentioned below for a better understanding of CSS and JS.

Windows 10 grid hover effect using HTML, CSS, and vanilla JS

Jash Gopani — Sat, 24 Apr 2021 11:47:13 +0000

Introduction
Observations
Getting Started
The Crux
1. Finding nearby elements to cursor
2. How to Calculate nearby points
3. Selecting and Styling the right elements
4. The Code
5. The Reduce Method
Handling Edge Cases
Additional Resources

Note: The aim of writing this article is that readers of all skill levels understand maximum content. I have explained all the necessary basic concepts used in the effect in brief in this article; So please do not ignore the article by its length. Instead, if you are not a beginner, I request you to go through the content and provide your valuable feedback :)

Introduction

Hello there, if you've arrived here after reading my previous post, I'd like to congratulate you as you already understand half of the code used in this effect👏. I highly suggest that you read the first part (Button hover effect) because I explain some essential CSS properties used in all these effects.

You can have a look at the final grid hover effect below.

Let's begin!

Observations

The cursor moves near some grid item.
As soon as it reaches a minimum distance from the item, the borders of those nearby items are highlighted.
The intensity of highlight on the border of items is based on the position of the cursor.

So, it is obvious that we will be working with mouse events, especially the mousemove event.

Getting Started

I started the basic setup by forking my own implementation of Windows button hover effect codepen and then adding the mouse events to the win-grid element. Here is the initial code.

HTML

<html>

<head>
  <title>Windows 10 grid hover effect</title>
</head>

<body>
  <h1>Windows 10 Button & Grid Hover Effect</h1>
  <div class="win-grid">
    <div class="win-btn" id="1">This is a windows hoverable item inside windows grid</div>
    <div class="win-btn" id="2">This is a windows hoverable item inside windows grid</div>
    <div class="win-btn" id="3">This is a windows hoverable item inside windows grid</div>
    <div class="win-btn" id="4">This is a windows hoverable item inside windows grid</div>
    <div class="win-btn" id="5">This is a windows hoverable item inside windows grid</div>
    <div class="win-btn" id="6">This is a windows hoverable item inside windows grid</div>
    <div class="win-btn" id="7">This is a windows hoverable item inside windows grid</div>
    <div class="win-btn" id="8">This is a windows hoverable item inside windows grid</div>
    <div class="win-btn" id="9">This is a windows hoverable item inside windows grid</div>
  </div>

</body>

</html>

CSS

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100&display=swap");

* {
  box-sizing: border-box;
  color: white;
  font-family: "Noto Sans JP", sans-serif;
}
body {
  background-color: black;
  display: flex;
  flex-flow: column wrap;
  justofy-content: center;
  align-items: center;
}

.win-grid {
  border: 1px solid white;
  letter-spacing: 2px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  text-align: center;
  grid-gap: 1rem;
  padding: 5rem;
}

.win-btn {
  padding: 1rem 2rem;
  text-align: center;
  border: none;
  border-radius: 0px;
  border: 1px solid transparent;
}

button:focus {
  outline: none;
}

JS

document.querySelectorAll(".win-btn").forEach((b) => {

  b.onmouseleave = (e) => {
    e.target.style.background = "black";
    e.target.style.borderImage = null;
  };

  b.addEventListener("mousemove", (e) => {
    const rect = e.target.getBoundingClientRect();
    const x = e.clientX - rect.left; //x position within the element.
    const y = e.clientY - rect.top; //y position within the element.
    e.target.style.background = `radial-gradient(circle at ${x}px ${y}px , rgba(255,255,255,0.2),rgba(255,255,255,0) )`;
    e.target.style.borderImage = `radial-gradient(20% 75% at ${x}px ${y}px ,rgba(255,255,255,0.7),rgba(255,255,255,0.1) ) 1 / 1px / 0px stretch `;
  });
});


const body = document.querySelector(".win-grid");
body.addEventListener("mousemove", (e) => {
   //effect logic here
});

This is how our output looks at this point

A quick explanation for the above code:

HTML code is pretty simple, a container div which will be the grid, and inside it are the items.
In CSS, I have used a CSS grid to layout the items, so that the design remains responsive. The grid layout has 3 items, the grid has the class win-grid and the grid items are of class win-btn.
JS is the button hover effect code. For a detailed explanation read this.

Now starts the interesting part!

The Crux

Note: This is my logic and there can be a different approach for implementing this effect but after looking at existing implementations available online I can assure you that my approach is the clean, least complicated, and scalable unlike other hardcoded ones 😉.

When the cursor comes inside the grid area, we need elements surrounding the cursor up to a particular distance. I refer to this radius or distance value as offset in my code. The bad news is that there is no method in JS to find elements in a certain region, but the good news is that there exists a method to find elements given a coordinate!

The method is document.elementFromPoint(x,y);
It returns the topmost element falling under the coordinate passed as arguments. So if the coordinates are valid, then the method will return the body or some other element inside the body.

Your immediate question would be how exactly do we use this method to find surrounding nearby elements and what coordinates do we pass?

To understand this, have a look below.

Finding nearby elements to cursor

From the figure, you might have guessed that we will check for points on the circumference of the circular region. That's absolutely correct!

We have 2 approaches from here:

Either we check for all points on the circumference
We skip some points

Obviously, option 2 looks less complicated; but which points to check for and which to skip?
Since the max number of elements inside the grid, near the cursor, will be 4, we can check in all 8 directions around the cursor just like we do in real life!

How to Calculate nearby points

Since these points lie on the circumference of the circle, we will use simple vector mathematics to find them.
So if p(x,y) is a point on the circumference of a circle on origin, with radius r, at a particular angle from the X-axis, the coordinates are calculated as follows

px = r*cos(angle)
py = r*sin(angle)

Note : angle is in radians i.e (degrees * PI / 180)

You can directly calculate these points, by simple logic (x-offset,y) for left, (x+offset,y) for right, and so on…But that would be too much hardcoding. Initially, I had gone for this approach and realized that if I want to increase or decrease the number of points around the cursor position, I had to declare or comment out lines of code, and that way we would not be writing very efficient code 🙃

Since the cursor is not going to be on the origin, we need to add the x and y distance from the origin to our coordinates px and py (Refer to the diagram above). Hence our new coordinates of the point on circumference become cx,cy (I call it changed x and y)

So the formula changes to

cx = x + r*cos(angle)
cy = y + r*sin(angle)

//where x,y refers to the current position of the cursor on the screen

ℹ: The origin of the screen is the top left corner and the left edge is the positive Y-axis and the top edge is the positive X-axis.

Selecting and Styling the right elements

Now, since we know how to find those 8 points, we will find elements on those points. We check if the element is not null, then check if its class is win-btn or not, and also, we need to check if the element already exists in the nearBy array or not. We only move ahead with the element if it does not exist in the nearBy array; then we finally apply border-image to the element.
Why don't we save the elements first then loop over the array again...that would be donkey work tbh.

The exists in nearBy array check is required because the mouseover event triggers every time the cursor is moved and our logic will be fired every time the event fires. So we need to ensure that we are not saving the same elements again and again.

Now calculating the border image is already explained in the previous article, so I won't explain it here again.

If the above explanation is not making sense to you, have a look at the code below.

Some readers at this point are like

Here you go 😜

The Code

//generate the angle values in radians
const angles = [];
for (let i = 0; i <= 360; i += 45) {
  angles.push((i * Math.PI) / 180);
}

//for each angle, find and save elements at that point
let nearBy = [];
nearBy = angles.reduce((acc, rad, i, arr) => {
    //find the coordinate for current angle
    const cx = Math.floor(x + Math.cos(rad) * offset);
    const cy = Math.floor(y + Math.sin(rad) * offset);
    const element = document.elementFromPoint(cx, cy);

    if (element !== null) {
      ;
      if (
        element.className === "win-btn" &&
        acc.findIndex((ae) => ae.id === element.id) < 0
      ) {
        const brect = element.getBoundingClientRect();
        const bx = x - brect.left; //x position within the element.
        const by = y - brect.top; //y position within the element.
        if (!element.style.borderImage)
          element.style.borderImage = `radial-gradient(${offset * 2}px ${
            offset * 2
          }px at ${bx}px ${by}px ,rgba(255,255,255,0.7),rgba(255,255,255,0.1),transparent ) 9 / 1px / 0px stretch `;
        return [...acc, element];
      }
    }
    return acc;
  }, []);

*What code is this? *🥴
*Why is he using reduce()and why not map() or forEach()? *🤔
what is this reduce() method ?😓

Just think what all steps we want to follow...
For each angle in the angles array,
1. We want to find an element from the coordinates.
2. Apply style to the element if valid
3. Save the element on which style was applied into the nearBy array

So after processing each angle of the angle array, we want a single result i.e an array containing all nearBy elements which then, we store in the nearBy array.

In such scenarios where we want a single output after performing some operation on each item of an array, we use the reduce() method.

The Reduce Method

It takes 2 arguments

function that is executed for each item in the array and returns the updated result by performing some operation over the previous result.
variable (generally referred to as accumulator) that is equal to the latest result returned by the function mentioned above

The first argument i.e the function

This has several arguments

The accumulator (this will be the result up to the current item)
The current item of the array
index of the item (optional argument)
array itself on which we are looping over (optional argument)

So, what happens inside reduce is that

It starts with the first item of the angle array. The accumulator has the initial value that is set in our code (In our case, it is an empty array). The current index is 0 and inside our function, We find an element based on the current angle and apply CSS to it (if applicable), and finally what we do is we return a new array with existing items of the accumulator (which do not exist at this point because the accumulator is empty) and our new element lets say e1 i.e [...acc, element].

So our updated accumulator is [e1]

Now, for the second item in the array, this process repeats, So the accumulator becomes [e1,e2]
and this goes on till we reach the end of the array. 4.Let's say if we get an element e3 which is win-grid itself, we don't want to add it to accumulator, so we simply return the accumulator as it is. So our accumulator remains [e1,e2] only.

Why don't we use `map()` or `forEach()`

There are 2 reasons for this

If we don't return anything in the map function, it will save an undefined value in the result array and to remove those we would have to use the filter() method 🥴 and we don't want to reiterate the array just for that.
The forEach method does not return any value, it will run a function for each item and we will have to push items manually into the nearby array which is not incorrect but the reduce() method exists for such use cases so it is more appropriate to use reduce() here.

That was a lot !!!

Let's have a look at the code and output at this point.

const offset = 69;
const angles = []; //in deg
for (let i = 0; i <= 360; i += 45) {
  angles.push((i * Math.PI) / 180);
}
let nearBy = [];

/*Effect #1 - https://codepen.io/struct_dhancha/pen/QWdqMLZ*/
document.querySelectorAll(".win-btn").forEach((b) => {

  b.onmouseleave = (e) => {
    e.target.style.background = "black";
    e.target.style.borderImage = null;
    e.target.border = "1px solid transparent";
  };

  b.addEventListener("mousemove", (e) => {
    e.stopPropagation();
    e.target.border = "1px solid transparent";
    const rect = e.target.getBoundingClientRect();
    const x = e.clientX - rect.left; //x position within the element.
    const y = e.clientY - rect.top; //y position within the element.
    e.target.style.background = `radial-gradient(circle at ${x}px ${y}px , rgba(255,255,255,0.25),rgba(255,255,255,0) )`;
    e.target.style.borderImage = `radial-gradient(20% 65% at ${x}px ${y}px ,rgba(255,255,255,0.7),rgba(255,255,255,0.7),rgba(255,255,255,0.1) ) 9 / 2px / 0px stretch `;
  });
});

const body = document.querySelector(".win-grid");

body.addEventListener("mousemove", (e) => {
  const x = e.x; //x position within the element.
  const y = e.y; //y position within the element.

  nearBy = angles.reduce((acc, rad, i, arr) => {
    const cx = Math.floor(x + Math.cos(rad) * offset);
    const cy = Math.floor(y + Math.sin(rad) * offset);
    const element = document.elementFromPoint(cx, cy);

    if (element !== null) {

      if (
        element.className === "win-btn" &&
        acc.findIndex((ae) => ae.id === element.id) < 0
      ) {
        const brect = element.getBoundingClientRect();
        const bx = x - brect.left; //x position within the element.
        const by = y - brect.top; //y position within the element.
        if (!element.style.borderImage)
          element.style.borderImage = `radial-gradient(${offset * 2}px ${
            offset * 2
          }px at ${bx}px ${by}px ,rgba(255,255,255,0.7),rgba(255,255,255,0.1),transparent ) 9 / 1px / 0px stretch `;
        return [...acc, element];
      }
    }
    return acc;
  }, []);
});

Here is the output

So as you can see, we are successful in detecting and highlighting nearby elements 🎉.
But, we must not forget to clear the previously applied effects when the mouse moves. This way, every time the mouse moves, the elements which were highlighted at the previous position are changed back to their original transparent border state and then we calculate all the nearby elements again from fresh and apply effects to the valid ones! And yes, do not forget to clear the previously saved nearBy elements else your cursor is at a new location and the current nearBy and previous nearBy both elements will be highlighted 😂 which would be not-so-pleasing.

So 2 things to do, remove all nearBy elements and border-image on them. We do this, just before calculating the new nearBy elements.

//inside the event listener

nearBy.splice(0, nearBy.length).forEach((e) => (e.style.borderImage = null));

//reduce method below

This one line of code does the 2 things I said.
The splice() method takes a starting index and the number of items to be removed from that starting index, including the starting index and it modifies the original array. Hence after splice() operation, our nearBy array is empty. The splice() method returns an array containing all the items which were removed. So we iterate over that array and remove the border-image of all those elements!

And we are almost done...

Handling Edge Cases

Just some small edge cases to cover...

Also, we want to clear any existing grid effects applied to a button, when we enter that button
Clear all effects when the cursor leaves win-grid

For case 1,

clear nearBy array in mouseenter event of win-btn !

For case 2,

clear nearBy array in mouseleave event of win-grid !

Since clearing nearby is performed multiple times, I have shifted that code to a method clearNearBy() and I call that wherever clearing is to be done.

And that is finally all the code

const offset = 69;
const angles = []; //in deg
for (let i = 0; i <= 360; i += 45) {
  angles.push((i * Math.PI) / 180);
}
let nearBy = [];

function clearNearBy() {
  nearBy.splice(0, nearBy.length).forEach((e) => (e.style.borderImage = null));
}

/*Effect #1 - https://codepen.io/struct_dhancha/pen/QWdqMLZ*/
document.querySelectorAll(".win-btn").forEach((b) => {

  b.onmouseleave = (e) => {
    e.target.style.background = "black";
    e.target.style.borderImage = null;
    e.target.border = "1px solid transparent";
  };

  b.onmouseenter = (e) => {
    clearNearBy();
  };

  b.addEventListener("mousemove", (e) => {
    e.target.border = "1px solid transparent";
    const rect = e.target.getBoundingClientRect();
    const x = e.clientX - rect.left; //x position within the element.
    const y = e.clientY - rect.top; //y position within the element.
    e.target.style.background = `radial-gradient(circle at ${x}px ${y}px , rgba(255,255,255,0.25),rgba(255,255,255,0) )`;
    e.target.style.borderImage = `radial-gradient(20% 65% at ${x}px ${y}px ,rgba(255,255,255,0.7),rgba(255,255,255,0.7),rgba(255,255,255,0.1) ) 9 / 2px / 0px stretch `;
  });
});

const body = document.querySelector(".win-grid");

body.addEventListener("mousemove", (e) => {

  const x = e.x; //x position within the element.
  const y = e.y; //y position within the element.

  clearNearBy();
  nearBy = angles.reduce((acc, rad, i, arr) => {
    const cx = Math.floor(x + Math.cos(rad) * offset);
    const cy = Math.floor(y + Math.sin(rad) * offset);
    const element = document.elementFromPoint(cx, cy);

    if (element !== null) {

      if (
        element.className === "win-btn" &&
        acc.findIndex((ae) => ae.id === element.id) < 0
      ) {
        const brect = element.getBoundingClientRect();
        const bx = x - brect.left; //x position within the element.
        const by = y - brect.top; //y position within the element.
        if (!element.style.borderImage)
          element.style.borderImage = `radial-gradient(${offset * 2}px ${
            offset * 2
          }px at ${bx}px ${by}px ,rgba(255,255,255,0.7),rgba(255,255,255,0.1),transparent ) 9 / 1px / 0px stretch `;
        return [...acc, element];
      }
    }
    return acc;
  }, []);
});

body.onmouseleave = (e) => {
  clearNearBy();
};

If you have reached here then a big Thankyou 🙏 for completing this article.

Feel free to comment if you have any questions or issues and I'll try to help you!😁

Be ready for my next article as it going to be about creating the Windows 10 Calendar effect using the concepts I explained in these 2 articles.
Do not forget to share this article with your dev friends 😉.

Additional Resources

You can refer to the additional resources mentioned below for a better understanding of CSS and JS.

Windows 10 button hover effect using HTML, CSS, and vanilla JS

Jash Gopani — Fri, 23 Apr 2021 09:44:47 +0000

Introduction
Observations
Getting Started
The Crux
1. Calculating the cursor position
2. Creating the spotlight
3. Applying spotlight to borders
Additional Resources

Introduction

If you are one of those who are fascinated by the windows 10 hover effect and would like to re-create it then you have come to the right place! In this quick tutorial, I will explain how you can get the same effect using CSS and a little bit of vanilla js.

Before starting with the explanation, let us first have a look at the final result.

Observations

A spotlight that follows the cursor inside the element.
The highlighting of the border according to the cursor position

Getting Started

Let us create some items on our page.

HTML



<html>

<head>
  <title>Windows hover effect</title>
</head>

<body>
  <h1>Windows 10 Button Hover Effect</h1>

  <div class="win-grid">
    <div class="win-btn" id="1">This is a windows 10 hoverable item</div>
    <div class="win-btn" id="2">This is a windows 10 hoverable item</div>
    <div class="win-btn" id="3">This is a windows 10 hoverable item</div>
    <div class="win-btn" id="4">This is a windows 10 hoverable item</div>
    <div class="win-btn" id="5">This is a windows 10 hoverable item</div>
    <div class="win-btn" id="6">This is a windows 10 hoverable item</div>
    <div class="win-btn" id="7">This is a windows 10 hoverable item</div>
    <div class="win-btn" id="8">This is a windows 10 hoverable item</div>
    <div class="win-btn" id="9">This is a windows 10 hoverable item</div>
  </div>

</body>

</html>

Without CSS, our page looks something like this

CSS



@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100&display=swap");

* {
  box-sizing: border-box;
  color: white;
  font-family: "Noto Sans JP", sans-serif;
  letter-spacing: 2px;
}

body {
  background-color: black;
  display: flex;
  flex-flow: column wrap;
  justofy-content: center;
  align-items: center;
}

.win-grid {
  border: 1px solid white;
  letter-spacing: 2px;
  color: white;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: stretch;
  text-align: center;
  grid-gap: 1rem;
  padding: 5rem;
}

.win-btn {
  padding: 2rem;
  text-align: center;
  border: none;
  border-radius: 0px;
  background: black;
  color: white;
  border: 1px solid transparent;
}

button:focus {
  outline: none;
}

After adding the above CSS styles, we get the following look

At this point, we are halfway through the code. We have our target elements set up on DOM, now the only part remaining is applying the highlight effect based on cursor movement.

One thing to note here is that we keep the border of the elements transparent by default and change it based on the cursor position ahead.

The Crux

For each target element, we need to add event listeners which listen for mouse movements. We apply CSS styles when the cursor moves over an element and remove those effects when the cursor leaves an element.

See below how the lines above convert to JS Code



document.querySelectorAll(".win-btn").forEach((b) => {

  b.onmouseleave = (e) => {
    //remove effects
  };

  b.addEventListener("mousemove", (e) => {
    //add effects
  });
});

Notice, I am using the new property based event listener syntax wherever applicable because it is concise and it overrides any other event listeners for the same event on the same object as compared to addEventListener which allows you to add multiple event listeners for the same event and same object.

Next, we need to calculate the position of the cursor inside the target element and draw a spotlight circle of a specific radius considering that point as the center of the circle.

Calculating the cursor position

Simple logic to calculate position relative to the element: find the difference of cursor position coordinates and starting coordinates of the target element. Refer to the illustration and code below for a better understanding.



const rect = e.target.getBoundingClientRect();
const x = e.clientX - rect.left; //x position within the element.
const y = e.clientY - rect.top; //y position within the element.

Creating the spotlight

Now simply add a circular radial gradient to our target element with the current cursor position as the center and the colors of the gradient go from white (with low opacity; 0.2) to transparent (opacity 0 basically).

So our radial gradient becomes



radial-gradient(circle at ${x}px ${y}px , rgba(255,255,255,0.2),rgba(255,255,255,0) )

Applying spotlight to borders

The border magic happens when we apply a similar gradient to the border of the image! For such special types of borders, we use the border-image CSS property as gradient functions in CSS return images! We use the same gradient with slightly more intensity (opacity 0.4).

The syntax for border-image is as follows



radial-gradient(20% 75% at ${x}px ${y}px ,rgba(255,255,255,0.7),rgba(255,255,255,0.1) ) 9 / 1px / 0px stretch

Now you might be wondering what are these extra values...So let me explain those also...

The syntax for border-image is

source | slice | border-width | border-outset | slice-repeat

Now you might be wondering what are those extra values with the radial gradient.

20% 75%: The horizontal and vertical radius of the gradient ellipse shape. % indicates that much % of parent’s width and height respectively.
slice (9): the radial-gradient is our source image for the border and the slice property divides that image into 9 regions which it then applies to edges and corners of the element specified.
width (2px): the thickness of the border-image
outset (2px): the space between the border and the element
repeat (stretch): this value specifies how the 9 regions, are applied to the image and edges. How the regions 5,6,7,8 specified here are repeated in the border

ℹ: I have attached an amazing tool for playing around with border-image (developed my MDN) so you can get a better understanding of this.

At last, we must not forget to remove these styles when the cursor moves out of our element.
Our complete JS code looks like this



document.querySelectorAll(".win-btn").forEach((b) => {
  console.log(b);
  b.onmouseleave = (e) => {
    e.target.style.background = "black";
    e.target.style.borderImage = null;
  };

  b.addEventListener("mousemove", (e) => {
    const rect = e.target.getBoundingClientRect();
    const x = e.clientX - rect.left; //x position within the element.
    const y = e.clientY - rect.top; //y position within the element.
    e.target.style.background = `radial-gradient(circle at ${x}px ${y}px , rgba(255,255,255,0.2),rgba(255,255,255,0) )`;
    e.target.style.borderImage = `radial-gradient(20% 75% at ${x}px ${y}px ,rgba(255,255,255,0.7),rgba(255,255,255,0.1) ) 1 / 1px / 0px stretch `;
  });
});

That's all folks :)

Hope this article has helped you understand, how to breakdown logically an effect into CSS and JS code.
Feel free to comment if you have any questions or issues and I'll try to help you! 😁

As promised, I have published an article on Windows 10 grid hover effect using HTML, CSS, and vanilla JS. Do check that out also!

Additional Resources

You can refer to the additional resources mentioned below for a better understanding of CSS and JS.

DEV Community: Jash Gopani

Disk space management in Linux: 3 Easy steps

Step 1 - Check the free space on disk

Step 2 - Checking Disk Usage

Step 3 - Remove unwanted files

Choose the correct color palette for your next project!

COLORINATOR

Motivation

60-30-10 rule

So where do you get these colors from ?

Best way to use this ?

Features to be added

Windows 10 calendar hover effect using HTML, CSS, and vanilla JS

Table of Contents

Introduction

Observations

Getting Started

HTML

CSS

JS

This is how our initial calendar looks like

Fine Tuning Grid Effect

Problem 1 - Element very close to the cursor is not highlighted

Solution 1

Problem 2 - The gap between the border and background of active date

Solution 2

Remaining logic

The Final Code

CSS

JS

Quick Code Explanation

classList.toggle()

Thank you! 😁

With this, we come to the end of this series of Recreating Windows Effects

Additional Resources

Windows 10 grid hover effect using HTML, CSS, and vanilla JS

Table of Contents

Introduction

Let's begin!

Observations

Getting Started

HTML

CSS

JS

A quick explanation for the above code:

Now starts the interesting part!

The Crux

Finding nearby elements to cursor

How to Calculate nearby points

Selecting and Styling the right elements

The Code

The Reduce Method

The first argument i.e the function

So, what happens inside reduce is that

Why don't we use map() or forEach()

That was a lot !!!

Handling Edge Cases

For case 1,

For case 2,

And that is finally all the code

Additional Resources

Windows 10 button hover effect using HTML, CSS, and vanilla JS

Table of Contents

Introduction

Observations

Getting Started

HTML

CSS

The Crux

Calculating the cursor position

Creating the spotlight

Applying spotlight to borders

Additional Resources

Why don't we use `map()` or `forEach()`