Hello folks, I guess most of you are using a windows computer or laptop. And since you are visiting this post, that means you're a developer too.

Windows comes with essential softwares installed that you can start with, like notepad for coding, cmd for running commands. But, while you grow up as a developer, you should change yourself with it.

Moving to our list

1. VS Code

This is probably the most important software for developers. VS code is made by Microsoft and is thus a great IDE for windows. It is a lightweight and efficient IDE for developers, that's why it's preferred by most of the programmers you see.

One more thing that makes VS code a great pick are the extensions present in it. It has a lot of essential pre built tools, that can just be installed and used. You can even customize the themes, code the look and almost everything inside it with the use of extensions.

VS Code Installation

If you want a specific post on which VS code extensions do I use, just let me know in the comments below.

2. Git

This software is really useful for programmers. Suppose you are writing 100's of lines of code from a week and by mistake your file gets corrupted. You lost all your work?

With Git you don't need to worry about it. It will manage all your previous work, files and modifications you did from time to time.

Just commit your code every time you make major changes, and it will not be lost.

Git Installation

Install

If you want Git tutorial then visit the link Git tutorial

3. PowerToys

Now comes the software that I think not much people know about.

PowerToys is also a software developed by Microsoft itself and is a really good and powerful software. It gives you a lot more features on Windows. You can have fast search, rename/modify files easily. Change file size, etc very easily.

For me, this is a must have software on windows, whether you're a developer or not.

Let me show you some screenshots of the features it gives.

PowerToys Installation

Install

Or install from Github

4. Terminal

There comes another really interesting software from Microsoft, that looks really great by design.

If you're a preogrammer, you must be aware of the PowerShell and Command Prompt on Windows. But if you are looking for a really good looking area to run your scripts, Windows Terminal is made for you. This also adds a lot of features in your hands, like tabs in the same window.

I mean, just look at it.

Windows Terminal Installation

Install

So, that's all for this list. If you liked the post, just leave a comment and please share it with your other developer friends, to make their Windows better too.

See you in the next post.

Till then Bye Bye :)

Hello folks, in this post, we will explore how can you create an effect like this using HTML, CSS and JS.

The simple logic

Just replace the "divname" in the code by the name given to the div to that you want to apply this hover effect. We will use jQuery. So firstly, import this line:

<!-- paste this line either in the 'title' tag or at the end of body -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />

//JS part
document.getElementById("divname").onmousemove = e => {
	const divname = document.getElementById("divname")
    const rect = projects.getBoundingClientRect(),
    	x = e.clientX - rect.left,
    	y = e.clientY - rect.top;

	projects.style.setProperty("--mouse-x", `${x}px`);
    projects.style.setProperty("--mouse-y", `${y}px`);
};

The CSS (playing with logic)

Now we will add some css to make this effect working.

/* CSS part -- this is the most important part to show the effect */
#divname::before {
    content: '';
    opacity: 0;
    position: absolute;
    height: 100%;
    width: 100%;
    /* background: white; */
    top: 0;
    left: 0;
    background: radial-gradient(
        800px circle at var(--mouse-x) var(--mouse-y), 
        rgba(255, 255, 255, 0.1),
        transparent 40%);
    transition: .5s all;
}
#divname:hover::before {
    opacity: 1;
}

Complete Code

Now I will show you how you can make the same thing as I showed you in the preview.

HTML part:

<!-- This is the html of the preview -->

<html lang="en">

<head>
    <meta charset="UTF-8"></meta>
    <meta content="IE=edge" http-equiv="X-UA-Compatible"></meta>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
    <title>Hover glow effect</title>
    <link href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" rel="stylesheet"></link>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet"></link>
</head>

<body>
<section id="skills">
        <div class="character">
            <img src="Assets/Images/AREmoji_20220823_102301_38219.gif" alt="Shivesh Tiwari">
        </div>
        <div class="skills-container">
            <h1>Skills</h1>
            <br /><br />
            HTML/CSS
            <div class="skill-meter">
                <div class="skill-reading skill-reading-transition" id="html" style="width: 100%;"></div>
            </div>
            <br />
            React JS
            <div class="skill-meter">
                <div class="skill-reading skill-reading-transition" style="width: 70%;"></div>
            </div>
            <br />
            JavaScript
            <div class="skill-meter">
                <div class="skill-reading skill-reading-transition" style="width: 90%;"></div>
            </div>
            <br />
            UI/UX
            <div class="skill-meter">
                <div class="skill-reading skill-reading-transition" style="width: 85%;"></div>
            </div>
        </div>
    </section>
</body>
</html>

/* add this css to the html */
* {
    margin: 0%;
    padding: 0%;
}
body {
    /* font-family: "Poppins"; */
    background: var(--default-theme);
    /* background: black; */
    overflow-x: hidden;
	font-family: 'Montserrat', sans-serif;
	min-height: 100vh;
}
section {
    min-height: 100vh;
    width: 100%;
    position: relative;
    z-index: 1;
}
#skills .character img {
    height: 100%;
    position: absolute;
    left: 0%;
    top: 0%;
}
#skills .skills-container {
    color: var(--dark-text-color);
    width: 30%;
    height: auto;
    padding: 2rem;
    /* background: red; */
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(0,-50%);
}
#skills .skill-meter {
    width: 100%;
    height: .7rem;
    background: white;
    border-radius: 1rem;
    margin-top: .6rem;
    padding: .1rem;
}
#skills .skill-meter .skill-reading {
    background: #4e33a4;
    height: 100%;
    border-radius: 2rem;
    transition: 5s linear;
}
#skills {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--dark-text-color);
    /* animation: 10s shape_color linear infinite; */
    backdrop-filter: blur(10px);
    background: rgba(74, 255, 165, 0.1);
    box-shadow: 0 25px 45px rgba(0,0,0,0.1);
    border-top: 1px solid rgba(255,255,255,0.5);
    border-bottom: 1px solid rgba(255,255,255,0.5);
}
#skills::before {
    content: '';
    opacity: 0;
    position: absolute;
    height: 100%;
    width: 100%;
    /* background: white; */
    top: 0;
    left: 0;
    background: radial-gradient(
        800px circle at var(--mouse-x) var(--mouse-y), 
        rgba(255, 255, 255, 0.1),
        transparent 40%);
    transition: .5s all;
}
#skills:hover::before {
    opacity: 1;
}

That's all for this post, see you in the next.