DEV Community: EasyCode Sardar

I built a Chrome extension to blur sensitive info in screenshots before sharing

EasyCode Sardar — Wed, 11 Mar 2026 08:17:14 +0000

Many times I needed to share screenshots with clients or teammates, but the screenshot contained sensitive information like:
• phone numbers
• emails
• order IDs
• private data

Editing screenshots every time in an image editor was slow.

So I built a small Chrome extension that lets you select areas of a webpage and blur them instantly before downloading the screenshot.

What it does

The extension allows you to:

• Select one or multiple areas of a webpage
• Blur the selected regions
• Download the final screenshot as PNG or JPG
• Keep the original layout exactly the same

Everything runs locally in the browser.

Why I built it

Most screenshot tools
either:
• require uploading images
• don’t support multiple blur areas
• break page layout during capture

So I wanted something simple that works directly inside the browser.

Demo: https://youtu.be/Pxqx2p3hHa0

How it works
1. Click the extension
2. Select areas to blur
3. Download the screenshot

The screenshot is captured using the browser’s native rendering, so the layout remains identical to what you see.

Privacy
• No uploads
• No tracking
• No analytics
• All processing happens locally

Chrome Extension

You can try it here:

https://chrome.google.com/webstore/detail/chhefcddnoablbeonjjcmhaakhacjnnk

Feedback welcome

This is a small side project and I’d really appreciate feedback from developers here.

If you have ideas for improvements or features, feel free to share them.

Reactjs email validation || Reactjs tutorial for beginners

EasyCode Sardar — Sat, 30 Apr 2022 02:56:51 +0000

{& YouTube T-5S_HqpJa0 %}

Reactjs email validation

Source Code: https://github.com/Hardeepcoder

Reactjs tutorial for absolute beginners

EasyCode Sardar — Tue, 21 Dec 2021 01:52:01 +0000

Email Validation

Reactjs tutorial for absolute beginners

Video Tutorial - Next.JS Form validation

EasyCode Sardar — Tue, 14 Dec 2021 05:45:16 +0000

NextJS - Form validations

EasyCode Sardar — Mon, 13 Dec 2021 04:34:28 +0000

We are using react-hook-form:

Open Your NextJS profile inside IDE - VsCode

Create validate.js file inside pages folder, open it and use shortcut rfce for create basic reactjs function.

(You can change ext of validate.js file to validate.jsx if you want to use html shortcuts like div.row for row class to div.)

create couples of html divs with classes such card, card-body and form-group to display your UI of form

full name UI with error display
<div className="form-group p-4"> <label htmlFor="fullname">Full name</label> <input className='form-control' {...register('fullname', {required:true})} /> {errors.fullname && errors.fullname.type == "required" && <p className='text-danger'>Please enter the full name</p>} </div>

City name UI with error display
<div className="form-group p-4"> <label htmlFor="city">City Name</label> <input className='form-control' {...register('city', {required:true, minLength:3})} /> {errors.city && errors.city.type === 'required' && <p className='text-danger'>Please enter city name</p>} {errors.city && errors.city.type === 'minLength' && <p className='text-warning'>Please enter minimum 3 letters</p>} </div>

Button UI
<div className="form-group p-4"> <input type="submit" className='btn btn-success' /> </div>

Import UseForm from react hook form
import { useForm } from 'react-hook-form'

const for register, handleSubmit and form state for errors
const {register, handleSubmit, formState:{errors}} = useForm();

Now add main function to alert the result
const myfun = (d) =>{ alert(d.fullname + ' from ' + d.city); }

mongoose connection in NextJS

EasyCode Sardar — Tue, 07 Dec 2021 06:34:18 +0000

#nextjs #tutorial for #beginners

check and give me feedback

https://www.youtube.com/watch?v=DN19NsAXAlQ

NextJS For beginners

EasyCode Sardar — Tue, 30 Nov 2021 06:43:32 +0000

#nextjs #tutorial for #beginners

check and give me feedback

https://www.youtube.com/watch?v=eHB6hMiv0lw

Setup Passport functionality in Laravel

EasyCode Sardar — Tue, 16 Nov 2021 03:50:43 +0000

First of all install laravel new project by composer
composer create-project laravel/laravel laraERP

Important: please add namespace inside RouteServiceProvider
protected $namespace = 'App\Http\Controllers';

Now, install passport functionality inside our laravel project
composer require laravel/passport

Error: Unable to resolve module - Toolbar Android

EasyCode Sardar — Mon, 15 Nov 2021 06:31:54 +0000

You can install the
@react-native-community/toolbar-android
by using below command:

yarn add @react-native-community/toolbar-android

npm install --save @react-native-community/toolbar-android

video tutorial: how to add google login for reactjs

EasyCode Sardar — Tue, 09 Nov 2021 01:17:50 +0000

https://youtu.be/99wG5k8Bn1M

Login with google - ReactJs

EasyCode Sardar — Sun, 07 Nov 2021 06:42:57 +0000

Open App.js and import GoogleLogin from package
import GoogleLogin from 'react-google-login';

Now just add Google Login button with Client ID
clientId="Your_own_client_ID.googleusercontent.com"
buttonText="Login with Google"
onSuccess={pass}
onFailure={fail}
cookiePolicy={'single_host_origin'}
/>

Just add two handles for onSuccess
const fail = (result) =>{
alert(result.error);
}

and for onFailure
const pass = (googleData)=>{
console.log(googleData);
}

MySQL - no need anymore

EasyCode Sardar — Mon, 25 Oct 2021 04:08:10 +0000

From now inside VSCode you can use mysql.

Ext: https://marketplace.visualstudio.com/items?itemName=cweijan.vscode-mysql-client2

Quick tutorial: https://www.youtube.com/watch?v=AvkryYyoZHA