DEV Community: Nikhil Chandra Roy

AI Frontend Coders vs. Real Frontend Developers

Nikhil Chandra Roy — Sat, 11 Jul 2026 15:25:53 +0000

AI Frontend Coders vs. Real Frontend Developers

Hi! I hope everyone is doing well.

I've wanted to write about this for a while, but laziness kept getting in the way. The truth is, this isn't a one-day problem. Over the past several months, I've spent a lot of time using AI coding tools like Cursor, Trae, and Google Antigravity.

AI technology is advancing faster than most of us can keep up with. Every day, there seems to be a new tool, a new feature, or a new way to build things.

Over the last few months, I've used Cursor and Google Antigravity extensively to build websites for freelancing projects. The results were often impressive, and the websites looked good. However, something felt missing: the human touch.

To be honest, there were projects where I barely wrote a single line of code myself. I simply described what I wanted in a prompt, and the AI editor generated the code.

I even created an Android application called Auravellano. I've also built creative websites, such as FSI Lab, using Next.js. In those projects, I combined my own coding skills with AI assistance, which felt much more rewarding.

I've completed many other projects with minimal manual coding and deployed them on Netlify. While that sounds productive, I slowly realized what I was losing:

Regular coding practice
Problem-solving ability
Motivation to code
A clear sense of direction

When AI handles everything, your brain gradually stops wanting to tackle complex problems. Instead of learning and thinking deeply, you become dependent on prompts. Over time, that dependency can turn into laziness.

I often think back to 2020 and 2021. During those years, I practiced coding almost every day. I wrote code manually, solved problems, learned new concepts, and committed to projects regularly.

Today, things are very different.

Many tasks that once required hours of work can now be completed in minutes. Everything feels easier, but at the same time, it feels like something valuable is disappearing. Technology moves forward without waiting for anyone.

The Reality of Freelancing Today

Freelancing has changed as well.

Many clients now expect significantly more work for significantly less money. Projects that might have been worth $500 a few years ago are now often expected to be completed for $50.

That's the reality many freelancers are facing today.

I'm not against AI. In fact, I use it regularly and believe it's an incredible tool. But I also think there's a difference between using AI to enhance your skills and using AI to replace them entirely.

The challenge for developers today isn't whether to use AI.

The challenge is how to keep learning, thinking, and growing while AI becomes more capable every day.

Final Thoughts

AI is a powerful assistant, but it shouldn't become a replacement for our ability to think, solve problems, and create.

The developers who will thrive in the future are not those who avoid AI, but those who know when to use it and when to rely on their own skills.

What do you think? Has AI made you more productive, or has it reduced the amount of real coding you do?

CSS easiest way to change the checkbox,range, radio color

Nikhil Chandra Roy — Mon, 09 Oct 2023 15:42:45 +0000

accent-color: red

this will change checkbox,radio,range color quickly.

HTML CSS clickable tab-pane (No Javascript)

Nikhil Chandra Roy — Thu, 29 Jun 2023 09:12:42 +0000

HTML CSS Image split 3d hover effect

Nikhil Chandra Roy — Thu, 29 Jun 2023 08:44:52 +0000

Background Toggle with clip path only HTML and CSS

Nikhil Chandra Roy — Thu, 29 Jun 2023 08:39:58 +0000

Windows 10 loading only HTML & CSS

Nikhil Chandra Roy — Thu, 29 Jun 2023 08:21:17 +0000

Comeback Strong: Strategies for Improving Your Web Development Skills after a Break

Nikhil Chandra Roy — Fri, 20 Jan 2023 12:22:23 +0000

Taking a break from web development can be beneficial for your well-being, but it can also make it hard to get back into the swing of things. In this post, we will explore various strategies for improving your development skills after a break and getting back to work as a web developer. We will cover topics such as refreshing your knowledge of the latest technologies, staying up to date with industry trends, and building a strong network of fellow developers. Whether you've been away for a week or a month, these tips will help you hit the ground running and become a more effective and efficient developer.
Topics:
• Refreshing your knowledge of the latest technologies
• Staying up to date with industry trends
• Building a strong network of fellow developers
• Setting goals and creating a plan
• Finding inspiration and motivation
Sections:
• Introduction
• Refreshing your knowledge of the latest technologies
• Staying up to date with industry trends
• Building a strong network of fellow developers
• Setting goals and creating a plan
• Finding inspiration and motivation
• Conclusion

Refreshing your knowledge of the latest technologies

One of the most important things you can do to improve your skills as a web developer after a break is to refresh your knowledge of the latest technologies. This can be a daunting task, as technology is constantly evolving and new tools and frameworks are always emerging. However, by taking the time to familiarize yourself with these new technologies, you'll be able to stay competitive in the job market and offer more value to your clients.

There are a few different ways you can go about refreshing your knowledge of the latest technologies, such as:

Online tutorials and courses: There are a plethora of free and paid online tutorials and courses available that can help you learn about new technologies. Websites like Codecademy, Udemy, Coursera, and freeCodeCamp offer a wide range of web development courses that can help you catch up on the latest tools and techniques.

Reading blogs and articles: Following blogs and articles written by industry experts can be a great way to stay up to date with the latest trends and technologies. Websites like DEV.to, Medium, and Hacker Noon are great places to find informative and engaging articles on web development.

Attend to conferences and meetups: Attending conferences and meetups can be a great way to learn about new technologies and network with other developers. Websites like Meetup.com and Eventbrite can help you find web development-related events in your area.

Experiment with new tools and frameworks: Finally, the best way to learn about new technologies is to experiment with them yourself. This could mean building a small project using a new framework or tool, or simply playing around with some sample code.

By taking the time to refresh your knowledge of the latest technologies, you'll be better equipped to take on new projects and offer more value to your clients. Remember to keep in mind that, you don't need to learn everything all at once, take your time and focus on what you feel is most important or relevant to your current work.

This is just an example, you can add more details, examples and resources to make it more informative. Additionally, you can also add some tips and tricks that you personally found useful while refreshing your knowledge of the latest technologies.

Staying up to date with industry trends

As a web developer, it's important to stay up to date with the latest trends and developments in the industry. This includes new technologies, design trends, and best practices. By keeping abreast of the latest trends, you'll be able to offer more value to your clients and stay competitive in the job market.

Here are a few strategies for staying up to date with industry trends:

Follow relevant social media accounts: Following relevant social media accounts, such as those of popular web development blogs and influencers, can help you stay up to date with the latest news and trends. Twitter, LinkedIn and Facebook are great platforms to follow the industry experts and influencers.

Participate in online forums and communities: Participating in online forums and communities, such as DEV.to, Stack Overflow and GitHub, can be a great way to learn about new technologies and best practices.

Read industry publications: Reading industry publications, such as Smashing Magazine, A List Apart, and Webdesigner Depot, can help you stay up to date with the latest design trends and best practices.

Attend web development events: Attend web development events, such as conferences, meetups, and workshops, can be a great way to stay up to date with the latest trends and meet other developers.

By staying up to date with the latest industry trends, you'll be better equipped to take on new projects and offer more value to your clients. Remember, you don't have to follow all the trends, pick what's relevant to you and your work, and focus on that.

Building a strong network of fellow developers

As a web developer, having a strong network of fellow developers can be incredibly beneficial. Not only can it help you stay up to date with the latest trends and technologies, but it can also provide you with valuable support and resources.

Here are a few ways to build a strong network of fellow developers:

Attend web development events: Attend web development events, such as conferences, meetups, and workshops, can be a great way to connect with other developers and learn about new technologies.

Participate in online forums and communities: Participating in online forums and communities, such as DEV.to, Stack Overflow, and GitHub, can be a great way to connect with other developers and learn about new technologies.

Join a study group or mentorship program: Joining a study group or mentorship program can be a great way to connect with other developers and learn from more experienced professionals.

Collaborate on open-source projects: Collaborating on open-source projects can be a great way to connect with other developers and work on real-world projects.

Connect with fellow developers on social media: Connecting with fellow developers on social media, such as Twitter and LinkedIn, can be a great way to stay connected and learn about new technologies.

Having a strong network of fellow developers can be incredibly beneficial for your professional growth as a web developer. Not only you can share your knowledge and experience with others, but you can also learn from them and get valuable feedback.

Setting goals and creating a plan

When it comes to improving your web development skills after a break, setting goals and creating a plan can be incredibly helpful. Having clear, measurable goals can give you something to work towards and help you stay motivated. Additionally, having a plan in place can help you stay organized and on track.

Here are a few steps to help you set goals and create a plan:

Assess your current skills: Take stock of your current skills and identify areas where you feel you need to improve.

Set clear, measurable goals: Set clear, measurable goals for yourself, such as learning a new programming language or framework, or building a specific project.

Create a plan of action: Once you have your goals in place, create a plan of action for achieving them. This could include identifying specific resources to study, setting a schedule for working on your goals, and determining how you will measure progress.

Track your progress: Regularly track your progress and make adjustments as needed.

Celebrate your successes: Celebrate your successes along the way, no matter how small they may be.

Setting goals and creating a plan can help you stay organized and motivated, and make it easier to achieve your goals. It's important to remember that goals and plans are not set in stone and are subject to change. It's okay to adjust them as you go along and find what works best for you.

Finding inspiration and motivation

When it comes to improving your web development skills after a break, finding inspiration and motivation can be crucial. It's easy to get discouraged and lose motivation when you're trying to learn new skills and improve your abilities. However, by finding inspiration and staying motivated, you'll be better equipped to achieve your goals.

Here are a few ways to find inspiration and motivation:

Surround yourself with positive influences: Surround yourself with people who are supportive, encouraging, and positive. Whether it's friends, family, or mentors, having people who believe in you can make all the difference.

Learn from others: Look for inspiration and motivation in the work of other developers. Follow the work of people you admire, read their blogs, and watch their videos.

Set small and achievable goals: Set small and achievable goals for yourself, and celebrate your successes along the way. This will help you stay motivated and see progress.

Reward yourself: When you achieve a goal or make progress, reward yourself. It can be something small like a cup of coffee or something bigger like a trip.

Take a break: Don't be afraid to take a break when you need it. Sometimes, a change of scenery or a short break can do wonders for your motivation and inspiration.

Finding inspiration and motivation can be challenging, but by keeping these tips in mind, you'll be better equipped to stay motivated and achieve your goals. Remember to be patient with yourself and to not compare yourself with others. Every journey is different, and you should be proud of your own progress and achievements.

Password view toggling only html and css

Nikhil Chandra Roy — Tue, 17 Aug 2021 17:18:27 +0000

I got this resource from stackoverflow,
I found 2 ways to toggling password view
like using ' -webkit-text-security: disc;' css property and font-family way.
Here is the resource:
https://stackoverflow.com/questions/17769429/get-input-type-text-to-look-like-type-password

Thanks,

Uncaught TypeError: Cannot read property 'innerHTML' of null (solution)

Nikhil Chandra Roy — Mon, 31 May 2021 04:19:31 +0000

Recently I develop some static pages and got few pages Uncaught TypeError: Cannot read property 'innerHTML' of null or similar kind of issues.
Issues coming when something missing like classes, selector in some pages but we are calling each portion of JavaScript to perform all the pages.

 <h2 class="">Hello World</h2>

    <script>
        let demo = document.querySelector('.demo')
        console.log(demo.innerHTML)

    </script>

issues coming when I am calling demo class but there are no demo class in Dom. So, in this moment javascript throwing TypeError.

but, if we make it short with just logical operators && it's not giving any TypeError. For example,

let demo = document.querySelector('.demo')
        demo&&(
            console.log(demo.innerHTML)
        )

Thanks.

Windows 10 startup loading only HTML & CSS

Nikhil Chandra Roy — Wed, 05 May 2021 07:56:27 +0000

Windows 10 startup loading only HTML & CSS

Windows startup loading is a common thing.
Whenever we start our computer we get the loading of windows.

HTML

<!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>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="plate_wrapper">
        <span></span><span></span><span></span><span></span>
    </div>
    <svg xmlns="http://www.w3.org/2000/svg" class="lds-microsoft" width="80px" height="80px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><g transform="rotate(0)"><circle cx="81.73413361164941" cy="74.35045716034882" fill="#ffffff" r="5" transform="rotate(340.001 49.9999 50)">
        <animateTransform attributeName="transform" type="rotate" calcMode="spline" values="0 50 50;360 50 50" times="0;1" keySplines="0.5 0 0.5 1" repeatCount="indefinite" dur="1.5s" begin="0s"/>
      </circle><circle cx="74.35045716034882" cy="81.73413361164941" fill="#ffffff" r="5" transform="rotate(348.352 50.0001 50.0001)">
        <animateTransform attributeName="transform" type="rotate" calcMode="spline" values="0 50 50;360 50 50" times="0;1" keySplines="0.5 0 0.5 1" repeatCount="indefinite" dur="1.5s" begin="-0.0625s"/>
      </circle><circle cx="65.3073372946036" cy="86.95518130045147" fill="#ffffff" r="5" transform="rotate(354.236 50 50)">
        <animateTransform attributeName="transform" type="rotate" calcMode="spline" values="0 50 50;360 50 50" times="0;1" keySplines="0.5 0 0.5 1" repeatCount="indefinite" dur="1.5s" begin="-0.125s"/>
      </circle><circle cx="55.22104768880207" cy="89.65779445495241" fill="#ffffff" r="5" transform="rotate(357.958 50.0002 50.0002)">
        <animateTransform attributeName="transform" type="rotate" calcMode="spline" values="0 50 50;360 50 50" times="0;1" keySplines="0.5 0 0.5 1" repeatCount="indefinite" dur="1.5s" begin="-0.1875s"/>
      </circle><circle cx="44.77895231119793" cy="89.65779445495241" fill="#ffffff" r="5" transform="rotate(359.76 50.0064 50.0064)">
        <animateTransform attributeName="transform" type="rotate" calcMode="spline" values="0 50 50;360 50 50" times="0;1" keySplines="0.5 0 0.5 1" repeatCount="indefinite" dur="1.5s" begin="-0.25s"/>
      </circle><circle cx="34.692662705396415" cy="86.95518130045147" fill="#ffffff" r="5" transform="rotate(0.183552 50 50)">
        <animateTransform attributeName="transform" type="rotate" calcMode="spline" values="0 50 50;360 50 50" times="0;1" keySplines="0.5 0 0.5 1" repeatCount="indefinite" dur="1.5s" begin="-0.3125s"/>
      </circle><circle cx="25.649542839651176" cy="81.73413361164941" fill="#ffffff" r="5" transform="rotate(1.86457 50 50)">
        <animateTransform attributeName="transform" type="rotate" calcMode="spline" values="0 50 50;360 50 50" times="0;1" keySplines="0.5 0 0.5 1" repeatCount="indefinite" dur="1.5s" begin="-0.375s"/>
      </circle><circle cx="18.2658663883506" cy="74.35045716034884" fill="#ffffff" r="5" transform="rotate(5.45126 50 50)">
        <animateTransform attributeName="transform" type="rotate" calcMode="spline" values="0 50 50;360 50 50" times="0;1" keySplines="0.5 0 0.5 1" repeatCount="indefinite" dur="1.5s" begin="-0.4375s"/>
      </circle><animateTransform attributeName="transform" type="rotate" calcMode="spline" values="0 50 50;0 50 50" times="0;1" keySplines="0.5 0 0.5 1" repeatCount="indefinite" dur="1.5s"/></g></svg>
</body>
</html>

for svg we collected it from Loading.io

CSS

*{
    box-sizing: border-box;
}
body{
    margin: 0;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 500px;
    height: 100vh;
}
.plate_wrapper{
    width: 200px;
    height: 180px;
    transform: rotateY(-33deg);
}
.plate_wrapper span{
    background: #00E7FF;
    display: inline-block;
    width: 50%;
    height: 50%;
}
.plate_wrapper span:nth-child(odd){
    border-right: 4px solid #000;
}
svg{
    position: absolute;
    bottom: 10%;
    transform: scale(.7);
}

If you need more kind of tutorial stay with me,
I will do more tutorials with HTML and CSS only.
Thanks.

HTML CSS Image split 3d hover effect

Nikhil Chandra Roy — Tue, 04 May 2021 09:40:58 +0000

HTML CSS Image split 3d hover effect

CSS is making images split into 4 items with background size and position.
HTML

<!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>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="image_3d">
        <span></span><span></span><span></span><span></span>
    </div>
</body>
</html>

and

CSS

*{
    box-sizing: border-box;
}
body{
    margin: 0;
    display: grid;
    place-items: center;
    height: 100vh;
}
.image_3d{
    perspective: 1000px;
    width: 960px;
    height: 640px;
    box-shadow: 3px 5px 25px 8px rgba(0, 0, 0, 0.2);
}
.image_3d span{
    display: block;
    height: 160px;
    transition: 1s;
    transform: rotateY(0deg);
}
.image_3d:hover span{
    transform: rotateY(360deg);

}
.image_3d span:nth-child(1){
    background: url('./child-5582985_960_720.png') 0px 0px/cover no-repeat;
    transition-delay: 0s;
}
.image_3d span:nth-child(2){
    background: url('./child-5582985_960_720.png') 0px -160px/cover no-repeat;
    transition-delay: .1s;

}
.image_3d span:nth-child(3){
    background: url('./child-5582985_960_720.png') 0px calc(-160px * 2)/cover no-repeat;
    transition-delay: .2s;

}
.image_3d span:nth-child(4){
    background: url('./child-5582985_960_720.png') 0px calc(-160px * 3)/cover no-repeat;
    transition-delay: .3s;

}

this is actually tricky to make image splitting.
You can see image properties size it has width: 960px; height: 640px;
so here is the trick.
Just making span tags we can split by doing their background-position and background-size.
If you like this tutorial, don't forget to share your thoughts.
Bye.

Background Toggle with clip path only HTML and CSS

Nikhil Chandra Roy — Tue, 04 May 2021 09:22:56 +0000

Background Toggle with clip path only html css

In this tutorial, I have used only HTML and CSS.
for background transition effect I have used clip-path generator

HTML

<!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>Document</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <input type="checkbox" name="" id="check">
    <label for="check">
        <i class="fas fa-sun"></i>
        <i class="fas fa-moon"></i>
    </label>
    <main></main>
</body>

</html>

for icon I have used font-awesome icons.
when toggling it will show sun and moon with black background.
CSS

*{
    box-sizing: border-box;
    margin: 0;
}
label{
    position: fixed;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 35px;
    background: #7d68ee;
    transform: translate(-50%, -50%);
    border-radius: 25px;
    cursor: pointer;
}
label .fas{
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    transition: .5s;
    color: white;
}
label .fa-moon{
    opacity: 0;
}
input:checked ~ label .fas{
    left: 70%;
}
input:checked ~ label .fa-sun{
    opacity: 0;
}
input:checked ~ label .fa-moon{
    opacity: 1;
}
input{
    display: none;
}
main{
    background: #000;
    position: relative;
    z-index: -1;
    width: 100%;
    height: 100vh;
    transition: 1s;
    clip-path: polygon(80% 0, 100% 0, 100% 12%, 100% 20%, 98% 3%, 82% 0, 65% 0);

}
input:checked ~ main{
    clip-path: polygon(0 0, 100% 0, 100% 12%, 100% 100%, 0 100%, 0 89%, 0 38%);
}

If you like my tutorial, don't forget to share your thought.
Thanks.