DEV Community: Anower Jahan Shofol

Job hunting is tiring, so I'm developing Jobsy

Anower Jahan Shofol — Mon, 02 Mar 2026 10:55:32 +0000

Job hunting is scary nowadays. Endless job descriptions, requirements, and company research can feel overwhelming.

After checking one job description after another, it becomes really annoying to read through all that text. Sometimes, it’s also hard to filter out the exact requirements and identify the skill gaps compared to our own skill set. That’s why I’m developing Jobsy.

Users can post any job description and upload their resume. With the help of an LLM API, Jobsy summarizes the job into clear expectations, highlights the skills the user already has, and identifies the skills they need to learn.

I’ve also added a new feature called Resume Reviewer. It provides an ATS score, section-wise scores, and improvement suggestions.

I’m still working on it, but I hope to make it live soon.

If you’re also struggling with this, let us know your story! And, what do you think about this idea?

Adding Web Analytics on Vercel Is Easier Than Ever (Free & Built-In)

Anower Jahan Shofol — Tue, 17 Feb 2026 04:42:56 +0000

Did you know that Vercel provides built-in web analytics that you can use even on the free plan?

In this guide, we’ll learn how to quickly enable Vercel Web Analytics in a Next.js project and start tracking visitors and page views with minimal setup.

Why Use Vercel Analytics?

Vercel Analytics allows you to:

Track page views and visitors
Monitor traffic trends
View analytics directly inside the Vercel dashboard
Avoid third-party analytics tools for basic insights

Step 1: Enable Analytics in the Vercel Dashboard

Go to your project in the Vercel dashboard
Open the Analytics tab
Click Enable

Note: Enabling analytics in the dashboard alone is not enough. You must complete the next steps to activate it properly.

Step 2: Install the Vercel Analytics Package

Open your Next.js project and run the following command from the root directory:

npm i @vercel/analytics

This installs the official Vercel Analytics library.

Step 3: Add the Analytics Component to Your App

Now, add the Analytics component to your root layout file.

Open app/layout.tsx and update it like this:

import { Analytics } from '@vercel/analytics/next';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <head>
        <title>Next.js</title>
      </head>
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  );
}

This ensures analytics are loaded across all pages of your app.

Step 4: Deploy Your Changes to Production

Once the setup is complete, you need to deploy your project. You have two options:

Option 1: Deploy via GitHub

If your GitHub repository is connected to Vercel:

Commit your changes
Push to the main branch

Vercel will automatically deploy your app.

Option 2: Deploy Using the Vercel CLI

If you prefer deploying from the command line:

Install the Vercel CLI globally:

   npm i -g vercel

Deploy your project:

   vercel deploy

That’s it! Your app is now live with analytics enabled.

Viewing Analytics Data

After deployment:

Go to the Vercel dashboard
Select your project
Open the Analytics tab

You’ll start seeing visitor counts and page views as traffic comes in.

Advanced Analytics (Pro & Enterprise Plans)

Users on Pro and Enterprise plans can also:

Track custom events
Measure button clicks
Monitor form submissions
Analyze purchases and user interactions

Create Eye-Catching Button Effect with Rotating Glow Animation

Anower Jahan Shofol — Thu, 12 Dec 2024 05:13:13 +0000

Ever wondered how websites create those eye-catching buttons with glowing, rotating effects? These effects can captivate users and elevate your website's UI/UX. Let’s explore how to build them step-by-step with CSS and a bit of JavaScript.

Step 1: Create the Button Layout

Let’s make a simple button at first-

<button>WHY CHOOSE US</button>

button {
  width: 250px;
  height: 80px;
  border-radius: 3rem;
  outline: none;
  background: black;
  border: 2px solid transparent;
  color: white;
  cursor: pointer;
}

/* ... Other styles ... */

It will look like this-

Step 2: Adding a Gradient Effect

Now, let’s talk about a special kind of gradient called a conic gradient. Have you heard of it? While linear gradients smoothly transition colors along a straight line and radial gradients blend colors outward from the center of a circle, conic gradients transition colors around a central point, forming a circular or cone-like pattern. It's a unique way to create dynamic and visually interesting designs.

See the difference below-

We will use the conic gradient for this effect. Let’s add that to our button-

  background: conic-gradient(from 0, transparent, white 10%, transparent 20%)
    border-box;

The CSS snippet involves a conic gradient and uses border-box for background sizing. Here's a breakdown of what's happening:

Conic Gradient Breakdown

conic-gradient(from 0, transparent, white 10%, transparent 20%):
from 0: The gradient starts at an angle of 0 degrees (the top of the circle) and proceeds clockwise.

transparent: The gradient begins with a fully transparent color.

white 10%: At 10% of the total gradient's circumference, the color transitions to white.

transparent 20%: At 20% of the gradient's circumference, it transitions back to transparent.

This pattern creates a "slice" of white surrounded by transparency.

border-box
border-box: The gradient applies to the area that includes the content, padding, and border of the element. This means the gradient will cover the entire element's box, up to the outer edge of the border.

After applying this effect, the button will look like this-

Now, we will use this conic gradient as our gradient border of the button. How can we do that?

We will use the power of box-sizing here. We will make multiple backgrounds for this button. The top background of the button will be a solid background which will have padding-box as box-sizing which means that it won’t stretch till the border. See the code below-

  background: linear-gradient(black, black) padding-box,
    conic-gradient(from 0, transparent, white 10%, transparent 20%) border-box;

So, now we have a black background that covers the button, including its content and padding. The conic-gradient we added earlier stretches all the way to the border. Since the border is transparent, we can see the conic gradient's 2px thickness showing through the border. Now, the button looks like this-

Step 3: Animating the Gradient

We’ve added that shiny glow effect to our button! Now, let’s make it move. To do this, we’ll need a little JavaScript. But first, we’ll update the CSS to make it more flexible and dynamic.

  background: linear-gradient(black, black) padding-box,
    conic-gradient(
        from var(--angle, 0),
        transparent,
        white 10%,
        transparent 20%
      )
      border-box;

Here, the only difference from previous section is that, we have introduced a CSS variable called --angle. [from var(--angle, 0) means that if the --angle value is not defined, the default value will be 0 which was same like before.] And, now we will change this ---angle value from 0 to 360 by Javascript. As a result, the conic-gradient will move from 0 to 360 degrees and make that glowing rotating effect. Let’s see the JavaScript part now-

document.addEventListener("DOMContentLoaded", () => {
  const element = document.querySelector(".rotating");
  let angle = 0;
  const rotate = () => {
    angle = (angle + 1) % 360; // Increment angle and keep it within 0-360
    element.style.setProperty("--angle", `${angle}deg`);
    requestAnimationFrame(rotate);
  };

  rotate();
});

Very simple operation. After the DOM contents are loaded, we are calling a function called rotate(). This function is incrementing the angle by 1 on each iteration and setting that value to the button’s CSS variable --angle. That eventually changes the place of the conic-gradient. We are calling this function iteratively using a built in function called requestAnimationFrame. This is a special Javascript function like setInterval or setTimeOut. Let’s get into a bit detail of this requestAnimationFrame function-

What It Does:
Keeps animations smooth: It synchronizes your animations with the screen's refresh rate (usually 60 frames per second) so they don't look choppy.

Saves power: It pauses animations when the user switches to another tab, saving resources.

Calls your function at the perfect time: It tells your animation logic when it's time to update, so everything stays in sync.

How It Works:
You give requestAnimationFrame a function to call (usually your animation logic). It runs this function right before the browser draws the next frame on the screen.

And, we get the final result. See the Codepen below to get step-by-step changes-

Now you've created a glowing, rotating button using CSS and JavaScript! Feel free to tweak the gradients, animation speed (Any idea how we can do that? Leave it in the comment.), or even add your own custom effects. These techniques are a great way to make your UI stand out.

Want more ideas for creative Javascript animations or CSS button effects? Let me know in the comments, and stay tuned for the next blog post!

If you like my writing and want to support me then you can-

You can also find me here-

3D Parallax Hover Effect Using TailwindCSS

Anower Jahan Shofol — Sun, 08 Dec 2024 15:51:57 +0000

Have you ever been mesmerized by those stunning 3D parallax hover effects on cards? They look complex, right? Well, I thought so too, until I came across a simple CodePen demo that showed how easy it is to create one. Do you want to learn it too? Let’s dive in-

Some basics

To achieve the 3D effect, we need to know couple of things first. Those are-

Perspective: The perspective property controls how far the object appears from the viewer. A lower value creates a stronger, more dramatic 3D effect, while a higher value makes the effect more subtle.
Transform: The transform property lets you apply 2D or 3D changes to an element. You can use it to rotate, scale, move, skew, and more!

Let’s jump to code

Check the final result first, so you will understand what we are trying to build. Hover over the card and see how it looks?

Now, let’s see how it works. I won’t explain every TailwindCSS class here. We will just discuss about the main classes which are doing the effect. First, let’s see the main card’s div’s classes-

<div class="cursor-pointer [transform:perspective(800px)_rotateY(10deg)] hover:[transform:perspective(800px)_rotateY(-10deg)] w-96 sm:w-84 p-5 bg-violet-300 rounded-lg shadow-lg group duration-300">

Look at this part here-

[transform:perspective(800px)_rotateY(10deg)] hover:[transform:perspective(800px)_rotateY(-10deg)]

We are doing two things here. At first, we are rotating the card by its Y axis by 10 degrees. And, also setting the perspective to 800px. As a result, the normal state of the card looks like the image below. It is slightly rotated to the right. And, as we have applied some perspective, you can see that the right side of the card is bit skewed. That’s how real 3D world works!

We can tweak the perspective to see the changes in the card. And, you will also get an idea how the perspective works-

This is how it looks if we change the perspective to 100px. The more we lower the perspective value, the more closer the content is - remember?

And, this is what we get if we set the perspective to 10000px. It is so far that it seems like there’s no rotation at all!

Now, we will see how it is having a 3D illusion when we hover it. And, you will be surprised to see that it’s so easy to fool our eye!

See this part of the code of the img-

<img class="duration-300 group-hover:-translate-x-8" .../>

When hovering over the card, the image slides 2.5rem to the left, creating a dynamic effect. For this, we are using Group modifer of TailwindCSS. And, that’s it! We will have a 3D image rotating card.

Now it’s your turn! Experiment with these classes, tweak the perspective, or combine this effect with other TailwindCSS utilities to create something unique. Don’t forget to share your creations in the comments or on social media!

If you like my writing and want to support me then you can-

You can also find me here-

Do I need Unit testing if I use Cypress?

Anower Jahan Shofol — Tue, 07 Nov 2023 14:00:34 +0000

I was wondering, do we need Unit testing (Let's say with Jest) if we use Cypress for E2E and Component testing? When I have started writing test codes for a signin page, I see that the validation codes are same in unit test and cypress code. So, if cypress handles the unit test part, then should I add unit testing too? I am not actually finding the difference/importance of separate unit testing here.

Can you explain this?

Github is experimenting with Visual Design

Anower Jahan Shofol — Thu, 18 Jun 2020 04:48:12 +0000

Just noticed today that Github is experimenting with their visual design. Here is the design for repository. Seeing change on regularly used application hits somewhere! :D

You can also check it by enabling them from feature preview.

Cover image: Github

Question: How do freelance developers get work without using platforms like UpWork or Fiverr?

Anower Jahan Shofol — Sat, 06 Jun 2020 08:34:02 +0000

Hi, all freelance developers or recruiters.

I saw many times that Senior freelance developers don't like the platforms like UpWork or Fiverr because of the price cut and low price works. I also face this problem.

But, without these kinds of platforms, how can a developer meet or find potential clients? (FYI, I am not asking about local clients). What is the process to get clients?

Thanks in advance.

Cover Photo by Annie Spratt on Unsplash

Run your Github Actions jobs from a specific directory

Anower Jahan Shofol — Tue, 26 May 2020 15:02:10 +0000

I am working on a current project where the Backend and the Frontend of the application are on the same repository of Github. That's why I faced a situation to run the Github Actions jobs for my React app from a specific directory. And, I find a quick solution to it.

Specify for all Jobs:

Github actions have a working-directory option to declare on workflow. It specifies the working directory for all run steps.

defaults:
  run:
    working-directory: web

Documentation:
defaults.run

Specify for specific Job:

So, you got the idea. This can be configured for specific jobs too. To set working_directory for a specific job, here is the procedure-

jobs:
  job1:
    runs-on: ubuntu-latest
    defaults:
      run:
        working-directory: scripts

Documentation:
jobs..defaults.run

Here is a simple Actions for NodeJs build job. The 'web' directory will be used for all jobs run-

name: Node.js CI

on:
  push:
    branches: [ frontend-develop ]
  pull_request:
    branches: [ frontend-develop ]

defaults:
  run:
    working-directory: web

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [10.x, 12.x, 14.x]

    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}
    - run: npm ci
    - run: npm run build --if-present
    - run: npm test

From the first documentation an important note to quote-

When more than one default setting is defined with the same name, GitHub uses the most specific default setting. For example, a default setting defined in a job will override a default setting that has the same name defined in a workflow.

Thanks for checking out the article. I hope it may help someone somehow. Let me know if I missed something or did something wrong.

Good Luck!

Cover Image: Github

If you like my writing and want to support me then you can-

You can also find me here-

What kind of physical exercises do you maintain to be fit and healthy?

Anower Jahan Shofol — Wed, 11 Mar 2020 12:06:54 +0000

Hi, folks, I was wondering what kind of physical exercises should be considered as a bare minimum to be fit?

I don't want to be a bodybuilder. I just want to be healthy, not to get diabetes, back pain, cancer or heart issues. I try to walk regularly. But, I am getting fat, having back pain and sick on every seasonal change!

So, what do you do to be healthy?

Cover Photo by Chander R on Unsplash

Is it ethical to work as a shadow developer by hiding identity? (Please read and help me)

Anower Jahan Shofol — Sat, 22 Feb 2020 05:34:21 +0000

Hi all, Please have a read on the discussion and help me with your thoughts.

Today, I have to decline projects from one of my regular clients. We surely had a great number of projects to collaborate with. The declining issue was about the working procedure of him which I came to know yesterday.

I just came to know that, he contacts potential clients or companies with his resume and apply for remote jobs. And, after that, he takes part in the interview, then delivers the test or project's work by hiring other freelancer developers like me. ( He is also a Frontend developer. So, he passes the interview by answering questions rightly.) He once proposed me to hit APIs from his PC by the remote connection for a future client. I didn't have to do that till now. But, it seemed a little bit of unsettling to me.

BTW, Today, I asked him if he clarifies the client that he has a team of developers or he works alone? If no, I also requested him not to add me on those projects. And, as I guessed, he is not working with me anymore on these kinds of projects.

I am feeling that I was right. Because a company hires a developer based on his skills, not his team. And, hiding the identity seemed unethical to me. And, I felt, I am just disrespecting my hard work.

But, I am also thinking- Have I done injustice to him?

Because, in freelance platforms like Fiverr or Upwork or others, I get offers from other developers from now and then (when I am writing this, I have got another one where he wants help for one of his client's projects). So, how would I do work where many of the orders are like these? Should I ask all of them if they inform the clients or just hiding it?

I know there are subcontractors on these platforms. That is one thing, and hiding identity is another thing. That's why I had to take a bold decision. But, I am afraid that- Will I get enough clients if I become this kind of strict?

I am seeking proper and constructive suggestions from you whether I should take these kinds of projects. It is the first place I am seeking some real suggestions (not just you have done a good or bad job).

Cover Photo by Akshar Dave on Unsplash

What is a good option for a PWA?

Anower Jahan Shofol — Tue, 21 Jan 2020 03:19:07 +0000

Hi all, I need to start building a PWA for a client. I am bit new to it, so want some suggestion from you.

What will be a good option for PWA? React, Angular, Vue or Flutter or any other options you want to mention.

How to use JetBrainsMono in VSCode (New font in the town)

Anower Jahan Shofol — Thu, 16 Jan 2020 17:14:16 +0000

JetBrains has released a typeface for all of their IDEs and this is opensource!😊 So, VSCode lovers or other IDE guys can also try this! For VSCode users-

Install the Font Pack in your computer (Guide is here-https://www.jetbrains.com/lp/mono/#how-to-install)
Go to Preferences->Settings->Font and then change the font to JetBrains Mono. You can Follow this gif-

Use it or not, you should have a look at their site at least. It is great! People are twitting about it!

If you like my writing and want to support me then you can-

You can also find me here-