Forem: Ashik

I Built FocusedMind - A Chrome Extension That Helps You Focus

Ashik — Fri, 11 Jul 2025 17:34:47 +0000

Let's be honest - how many times have you started working on something important, only to find yourself scrolling through social media 10 minutes later? Or opened a new tab to "quickly check" something and ended up in a 2-hour YouTube rabbit hole?

I've been there. We've all been there.

Most website blockers say "NO" and leave you staring at a blank screen, feeling frustrated. But what if there was a better way?

Introducing FocusedMind 🚀

FocusedMind isn't just another website blocker - it's your focus coach that helps you build better concentration habits through positive reinforcement and real-time feedback.

The Features That Matter

Category blocking: You can block sites based on category, like Social Media, News, Entertainment and Adult Content. Based on category selection, the extension will show you a warning on the blocked sites.

Custom URLs: The list of sites is pre-defined to keep the extension simple and skip the API call. So, in case of a custom URL, you've the option to block in the custom URL option.

Whitelist mode: Only allow essential sites during focus time

Real-Time Feedback
Real-Time Live distraction counter
Dynamic efficiency rating
Motivational messaging based on your performance

Why I Built This 🛠️

As a developer, I know a bunch of productivity software with a lot of features, and they all felt punitive. They'd block a site and make me feel bad about it. Also, I felt lost in the features. So I wanted something that:

Encourages growth instead of punishment
Provides insights into my focus patterns
Celebrates progress rather than highlighting failures
Adapts to my needs instead of being rigid

Under the Hood ⚙️

Built with modern Chrome Extension Manifest V3:

Background Service Worker for persistent session management
Content Scripts for real-time website blocking
Smart URL parsing handles various formats automatically
Chrome Storage API for seamless data persistence

Ready to Try?

-- Install FocusedMind on Chrome, use it, and leave your feedback.
-- Share with your team and help others find focus to

Heads-up: Chrome may show a warning during installation since FocusedMind is still new on the store. Rest assured — this extension runs locally, makes no API calls, and does not collect any user data. Your privacy and focus are fully respected.

I'll be sharing my journey of building this extension soon. So if you're a dev with an idea and decent JavaScript chops, you'll see how visualization turns into execution.

Comment below with your feedback, suggestions, and features you think will add value.

DOM

Ashik — Fri, 20 Jun 2025 16:53:35 +0000

Ashik

Apr 12 '25

JavaScript DOM Manipulation

#javascript #programming #tutorial #webdev

Comments

4 min read

[Boost]

Ashik — Mon, 16 Jun 2025 18:45:38 +0000

Ashik

May 30 '25

Zod: The Ultimate Validation Library for TypeScript

#tutorial #zod #typescript #webdev

Comments

5 min read

Zod: The Ultimate Validation Library for TypeScript

Ashik — Fri, 30 May 2025 16:20:19 +0000

Ashik

May 30 '25

Zod: The Ultimate Validation Library for TypeScript

#tutorial #zod #typescript #webdev

Comments

5 min read

Zod: The Ultimate Validation Library for TypeScript

Ashik — Fri, 30 May 2025 15:15:57 +0000

This post was originally posted here on my site codespoetry.com

Zod is a TypeScript-first schema validation library. Unlike static type checking, Zod helps you to validate data dynamically at runtime. Whether user input, API response, or any data you want to validate, structure custom errors, Zod is the ultimate tool.

I’ll go through the discussion on schema structure, custom validation, asynchronous checks, and demonstrate how to integrate Zod into a React/Next.js project for form validation, state management, and prop type validation.

Zod Use Cases

1. Schema Definitions

Defining a complex schema using Zod is fun. Array, Object, nested data, nothing is as complex as we may think. Imagine a address schema:

import {z} from 'zod';

const addressSchema = z.object({
  area: z.string(),
  city: z.string(),
  zipCode: z.string().regex(/^\d{5}$/, "Invalid zip code"),  
  country: z.string(),
});

This schema will validate the address and ensure type safety. We can also set custom errors on validation.

import {z} from 'zod';

const addressSchema = z.object({
  area: z.string({ required_error: "Area is required" }),
  city: z.string({ required_error: "City is required" }),
  zipCode: z.string({ required_error: "Zip code is required" }).regex(/^\d{5}$/, "Invalid     zip code"),  
  country: z.string({ required_error: "Country is required" }),
});

This schema will validate the data types and return an error if any field is missing or empty. We can also chain the validation methods. And here are a few examples

// validate both undefined and empty fields or data 
z.string().nonempty()

// validate undefined, nonempty, minimum characters
z.string().nonempty().min(100);

// validate undefined, nonempty, minimum and max characters
z.string().nonempty().min(100).max(500);

// setting up custom error message
z.string({ required_error: "String is required" })
.nonempty({message: "String can't be empty"})
.min(100, {message: "A minimum of 100 characters is required"})
.max(500, {message: "String can't be more than 500 characters"});

Note that in the validation chain, if multiple validations fail, the last error message will be assigned to the error data. For example, for a blank text field, both ‘nonempty’ and ‘min’ are correct. And the error defined in the min() method will be added to the error data. This is how Zod prioritizes errors when multiple rules fail.

2. Advance validations

All the default validation methods can be used in different contexts. Like, you can use the ‘min()’ method in array data to ensure a minimum of data is present. Get back to the address schema

import {z} from 'zod';

const addressSchema = z.array(
z.object({
  area: z.string({ required_error: "Area is required" }),
  city: z.string({ required_error: "City is required" }),
zipCode: z.string({ required_error: "Zip code is required" }).regex(/^\d{5}$/, "Invalid zip code"),  
country: z.string({ required_error: "Country is required" }),
})
).min(1, {message: "A minimum of one address is required"});

This will prevent form submission if there is no address in the submitted data. The address object will be in an array, as this is wrapped in Zod array data, to clarify. We can also use other methods to validate our data or a collection of data.

3. Custom Validations

In addition to the default validation methods, our project may require custom validations. Calculating age based on DOB input, comparing dates, validating a field’s data that depends on a different field, etc. Zod has refine and superrefine methods to implement custom validation. The refine is a syntactic sugar of superrefine. Here is how we can use refine:

jobDescription: z.string().refine((value) => {
         if (value.trim().split(" ").length > 500) {
           return false;
         }
         return true;
         },
         { message: "Job description can't be more than 500 words" }
       ).optional(),

The above Zod schema checks if the job description words are longer than 500 words. If it is, it will return false. However, it's an optional data as we added Zod's optional() method.

The refine method should always return a boolean. If it’s untrue, the validation fails, and the error state updates with the message passed as the second argument to the refine function. To clarify the entire scenario, the refine method takes two arguments. The first one is a validation function. You can check the value and run your refinement as you want to validate your data. The second argument should be an Object containing a message for the error state. The default Zod’s max() method checks characters. Our goal was to validate words. So, we used refine here.

As I discussed in “Advance Validations” how we can chain validation methods, we can chain the refine() method as well and validate our data with different conditions. We can also run the refine() method on a whole object data group or on the array. For a data group, we’ll get all the data in the value parameter. Here is an example.

z
  .array(
    z
      .object({
        company: z
          .string({ required_error: "Comapny name is required" })
          .nonempty({ message: "Company name can't be empty" }),
        jobTitle: z
          .string({ required_error: "Job title is required" })
          .nonempty({
            message: "Job title can't be empty",
          }),
        startingDate: z.date({ required_error: "Starting date is required" }),
        endDate: z
          .date({ required_error: "End date is required" })
          .optional()
          .nullable(),
        currentlyWorking: z.boolean().optional(),
        jobDescription: z
          .string()
          .refine(
            (value) => {
              if (value.trim().split(" ").length > 500) {
                return false;
              }
              return true;
            },
            { message: "Job description can't be more than 500 words" }
          )
          .optional(),
      })
      .refine(
        (date) => {
          if (date.currentlyWorking) return true;
          return compareDesc(date.startingDate, date.endDate ?? new Date()) ==
            0 ||
            compareDesc(date.startingDate, date.endDate ?? new Date()) == -1
            ? false
            : true;
        },
        {
          message:
            "Star and End date can't be the same or End date is before the Start date",
          path: ["endDate"],
        }
      )
  )
  .optional()
  .default([]);

The compareDesc function is from date-fns to check date equality.

We can also pass an async function as our validator and validate data.

const stringSchema = z.string().refine(async (val) => val.length <= 8);

Zod’s parse and parseAsync are the methods to parse a Zod schema and check if the data is valid. The parseAsync method is used to validate data asynchronously for an asynchronous validation function passed to the refine method.

const stringSchema = z.string();

stringSchema.parse("fish"); // => returns "fish"
stringSchema.parse(12); // throws error

The parse and parseAsync throw an error on failing validation. If we want to get an object containing parsed data or an error, we can use safeParse and safeParseAsync.

Integration Zod into a React Project

1. Form validation with React Hook Form

Zod pairs beautifully with form libraries like React Hook Form for validating user inputs. Here’s a login form example:

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

const schema = z.object({
  email: z.string().email(),
  password: z.string().min(8),
});

function LoginForm() {
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: zodResolver(schema),
  });

  const onSubmit = (data) => {
    console.log("Valid data:", data);
  };

  return (
    <div>
      <input {...register("email")} placeholder="Email" />
      {errors.email && <p>{errors.email.message}</p>}
      <input type="password" {...register("password")} placeholder="Password" />
      {errors.password && <p>{errors.password.message}</p>}
      <button onClick={handleSubmit(onSubmit)}>Login</button>
    </div>
  );
}

Zod validates the form data, and React Hook Form manages the UI state, displaying errors as needed.

2. Prop Types Validation

const propsSchema = z.object({
  title: z.string(),
  count: z.number().int().positive(),
});

function MyComponent(props) {
  const validatedProps = propsSchema.parse(props);
  return <div>{validatedProps.title}: {validatedProps.count}</div>;
}

Zod provides detailed errors if props don’t match the schema, enhancing debugging.

Zod Documentations:

Zod has its rich documentation on use cases. You can check it out here and dive deep.

Conclusion

Zod is a handy, small yet powerful tool to enhance your development skills. Zod provides clear error messages and a straightforward API. This makes it an excellent choice for TypeScript applications needing robust data validation.

If you like this article, feel free to share it in your network and comment below with any feedback or suggestions.

Power of WP-CLI: Streamline Your WordPress Workflow

Ashik — Mon, 05 May 2025 12:00:56 +0000

Here is the original post link

WP-CLI is a powerful command-line interface for managing WordPress installations. Whether you're a site owner, developer, or working on a client project, WP-CLI can significantly speed up your workflow.

If you're familiar with command-line tools, such as Linux terminal, Windows PowerShell, or the macos command line, you're well-prepared to start using WP-CLI. If not yet, that's also ok with some practices to be familiar with. With just a few commands, you can streamline updates, manage plugins and themes, create users, and much more.

Getting Started with WP-CLI

Installation: Follow the simple steps on https://wp-cli.org/ to install it on your operating system.

Basic Usage: Open your terminal, navigate to your WordPress directory or login to your hosting through SSH, and type wp followed by your command.

Why Use It?

WP-CLI allows you to perform a wide range of tasks using the command line without logging in to the WordPress dashboard. This helps you automate repetitive tasks, easily manage multiple sites, or run various operations that would be otherwise time-consuming through the graphical interface.

Use Cases for WP-CLI

Here are some practical scenarios where WP-CLI shines, complete with example commands to demonstrate its power:

1. Updating WordPress Core, Plugins, and Themes

With WP-CLI, you can update everything in seconds.

Update WordPress core: wp core update
Update all plugins: wp plugin update --all
Update all themes: wp theme update --all

2. Managing Plugins and Themes

Install, activate, deactivate, or delete plugins and themes without touching the dashboard.

Install and activate a plugin: wp plugin install woocommerce --activate
Deactivate a plugin: wp plugin deactivate woocommerce
Delete a theme: wp theme delete twentytwenty

3. Creating and Managing Users

With WP-CLI, we can create a user or even reset a password.

Create a new user: wp user create johndoe johndoe@example.com --role=author
Reset a user's password: wp user reset-password johndoe

4. Database Management

Handle database tasks like export, import, or optimize it.

Export the database: wp db export
Import a database: wp db import backup.sql
Optimize the database: wp db optimize

5. Search and Replace

Perfect for site migrations, this command lets you update URLs or text across your database.

Search and replace URLs: wp search-replace 'http://old-domain.com' 'http://new-domain.com'

6. Managing Posts and Pages

Create, edit, or delete content directly from the terminal.

Create a new page: wp post create --post_type=page --post_title='About Us' --post_status=publish\
Delete a post: wp post delete 123 --force

7. Running Cron Jobs

Manually trigger or manage WordPress cron jobs without waiting for scheduled events.

Run all cron events: wp cron event run --all
List scheduled cron events: wp cron event list

8. Generating Dummy Data

Generate dummy content to test your site.

Generate 10 dummy posts: wp post generate --count=10
Generate 5 dummy users: wp user generate --count=5

9. Managing Multisite Installations

For WordPress Multisite users, WP-CLI simplifies network-wide management.

Create a new site: wp site create --slug=newsite
List all sites in the network: wp site list

Conclusion

WP-CLI transforms WordPress management by offering a fast, efficient alternative to the dashboard. From automating updates to managing multisite networks, it saves time, reduces errors, and lets you focus on what matters most. Run wp help for a list of commands or explore the https://developer.wordpress.org/cli/commands/ for more commands and options.

If you like this article, share it with your friends and colleagues. Comment below with your feedback, suggestions or just to say "Hi"!

How a Browser Works: DNS, HTTP Request, DOM, CSSOM

Ashik — Sun, 20 Apr 2025 04:19:01 +0000

Understanding how browsers work is a game-changer to become a better developer, problem solver, and all-around tech badass.

Step-by-Step: How the Browser Works

1. When we hit a domain e.g. codespoetry.com, the browser looks for DNS resolution. So, it goes through a DNS lookup:

Browser Cache
OS Cache
Router
ISP DNS server
Authoritative DNS server

In case of a valid domain, the domain is resolved to an IP address like 123.12.13.14

2. Then the browser makes an HTTP/HTTPS request and opens a TCP connection (or TLS for HTTPS). The HTTP request contains some necessary info as below:

GET / HTTP/1.1
Host: codespoetry.com
User-Agent: Chrome/123.0.0

3. After receiving the HTTP/HTTPS request, the server responds with an HTML Document:

HTTP/1.1 200 OK
Content-Type: text/html

<html>
  <head><title>Welcome</title></head>
  <body>Hello world</body>
</html>

4. The Browser starts rendering HTML, and this contains a few steps:

Parsing the DOM

HTML is parsed top to bottom.
Tags become nodes in a tree (DOM)
Assets are fetched (CSS, JS, Images)
The browser pauses HTML parsing when it finds a stylesheet ( or script ( unless defer or async is used) since those are render blocking.

DOM construction is incremental. The HTML response turns into tokens, which turn into nodes, which turn into the DOM Tree. A single DOM node starts with a startTag token and ends with an endTag token. Nodes contain all relevant information about the HTML element. The information is described using tokens. Nodes are connected into a DOM tree based on the token hierarchy. If another set of startTag and endTag tokens comes between a set of startTag and endTags, you have a node inside a node, which is how we define the hierarchy of the DOM tree.

Note: The script with the defer attribute downloads the script in parallel with HTML parsing, but executes after finishing the parsing of HTML. And a script with the async attribute executes immediately after download finishes – even if the HTML is still being parsed.

Style Calculation: CSSOM

CSS is parsed into another tree called CSSOM, similar to the DOM
DOM and CSSOM are merged into the render tree

The DOM contains all the content of the page. The CSSOM contains all the information on how to style the DOM. CSSOM is similar to the DOM, but different. While the DOM construction is incremental, CSSOM is not. CSS is render blocking: the browser blocks page rendering until it receives and processes all the CSS. CSS is render-blocking because rules can be overwritten, so the content can’t be rendered until the CSSOM is complete. The render tree captures both the content and the styles: the DOM and CSSOM trees are combined into the render tree. To construct the render tree, the browser checks every node, starting from the root of the DOM tree, and determines which CSS rules are attached.

Here is MDN reference to know more about the rendering path.

Layout

Each node is given coordinates (where it appears in the viewport)

Painting

Nodes are drawn on the screen pixel by pixel

Composition

Browser layers things (like z-index, transforms etc) and paints them efficiently

Now the actual first render happens, and we see something on the screen.

5. JavaScript Execution

The Browser parses and runs JS
JS can:
- Change the DOM
- Respond to user events (clicks, inputs)
- Make new network requests (AJAX/fetch)

Here, I wrote an article on JavaScript execution context.

6. Ongoing stuff

User interacts
Event trigger
DOM changes
CSS changes
Browser re-calculates layout/paint

Render Flow Visualized:

URL → DNS → HTTP Request → HTML Response
     ↓
Parse HTML → DOM Tree
     ↓
Fetch CSS → CSSOM Tree
     ↓
DOM + CSSOM → Render Tree
     ↓
Layout → Paint → Composite → Show on Screen

All this work is produced and processed by Browser Engines. Here are the Key Browser Engines under the hood.

Browser	Engine
Chrome, Edge	Blink + V8
Firefox	Gecko + SpiderMoneky
Safari	Webkit + JavaScriptCore

Here is the MDN reference on how browsers work and a deep dive.

I hope this article will help you to understand what's going on behind the certain (Browser). Please share the article and leave your feedback, suggestions whatever in the comment box below.

JavaScript DOM Manipulation

Ashik — Sat, 12 Apr 2025 21:02:12 +0000

I wrote this post on my blog here

Initially, JavaScript was built to manipulate the DOM and capture user interaction. Nowadays, JavaScript is far from that and has established itself as a powerful cross-platform language. Although the old-school method may not be as popular in the modern era of React, Vue, and other libraries, it still has a place. Learning DOM manipulation helps developers understand how frameworks manage and update the DOM efficiently (e.g., React's virtual DOM).

It's invaluable for debugging or enhancing legacy systems that rely heavily on direct DOM access.

What is DOM

The DOM, the Document Object Model, is a tree view of a page's HTML structure. If we check a page's source code, we see many nodes in parent-child relations. That's the DOM.

What is DOM Manipulation

The DOM manipulation uses JavaScript to add, remove, and modify the HTML structure. We may need it to apply CSS, add attributes, remove/show/hide an element based on user interaction, and more.

DOM Manipulation

I will start by creating an element and manipulating it into a document.

Let's assume we have a document with only a body tag, and we'll add a few elements to it.

<body>

</body>

//creation of a div element and add class
const divElement = document.createElement("div");
divElement.classList.add("container");

//creation of a heading element add text
const heading = document.createElement("h1");
heading.textContent = "Hello ";

//creation of a span element and add class and text, set text color of the span
const span = document.createElement("span");
span.classList.add("highlight");
span.style.color = "red";
span.textContent = "World";

//creation of a heading2 element and add text
const heading2 = document.createElement("h2");
heading2.textContent = "Hello World 2";

//appending span element to the heading element
heading.appendChild(span);

//appending heading to the div element and span element to the heading element
divElement.append(heading, heading2);

//appending div element to the body
document.body.append(divElement);

To insert element, I used both the append and appendChild methods. There are subtle differences between them.

append is newer and more versatile, supporting text nodes and multiple elements, while appendChild is older and more limited. So, in place of textContent, we can use append to add text but not the appendChild method. An example will come later in this article.

Some selection methods

In the above code example, we selected the body tag using a pre-defined way of document. So, by writing document.body, we got access to the body tag. But what if we need to select a different element?

Here are 2 common ways to select elements.

document.querySelector();
document.querySelectorAll()

Both methods accept a string as a parameter. The querySelector() method will return the element as the node we want to select.

The querySelectorAll() method returns a Node List containing all the matched elements. A Node List is similar to an Array.

We can pass the selector to the above methods, like ".myElement," "#myElement," or "h1." Class, ID, or element tags will work as selectors.

Something Complex

We'll check the above 2 methods of selecting elements to see if they actually work and try some complex manipulation.

//select the span element
const spanElement = document.querySelector(".highlight");

//create a new span element and add text to it
const spanElement2 = document.createElement("span");
spanElement2.append("Colorful ");

//insert the new span element before the existing span element
heading.insertBefore(spanElement2, spanElement);

Here we used querySelector method to select the span element and class is our selector here. We can also use "span" as a selector or element ID (if any). These two methods also support nesting selection, like document.querySelector(".highlight .myCustomClass"). This will select the element with the class myCustomClass inside the .highlight element.

The insertBefore method is used to insert an element exactly before the referenced element. So, the code is now like below:

<body>
  <div class="container">
    <h1>
      Hello <span>Colorful </span>
      <span class="highlight" style="color: red">World</span>
    </h1>
    <h2>Hello World 2</h2>
  </div>
</body>

Note: If there is no referenced element, the new element will be inserted as the last child of the container/parent element.

More selection methods

There are a few more ways to select an element.

document.getElementById()
document.getElementsByTags()
document.getElementsByClassName()

The getElementById() method can select a single element by ID. The other two methods will return a collection of nodes (if available) as NodeList.

While the querySelector and querySelectorAll methods are modern and more flexible, these three methods are faster for performance-sensitive tasks.

The innerHTML method

The innerHTML is commonly used to insert elements into DOM. This method treats everything as text even though you insert a node. Also, this method replace everything within the Node you're inserting in.

The innerHTML can introduce security risks when working with user input (e.t., cross-site scripting);

Set attributes DOM manipulation

Now we know how to select an element and manipulate DOM. JavaScript provides setAttributes method to set a custom attribute to an element.

//select the highlighted span element by classname
const highlightedElement = document.getElementByClassName("highlight")[0];

//set a custom attribute
highlightedElement.setAttribute("data-site", "codespoetry.com");

In the above example, we selected an element by ClassName. Since this method returns a collection of nodes even if only one element exists, I used the index [0] to select the first element. We can use the index to select a specific element in case of multiple elements with the same class or tag.

One thing to note here, we can set any name as an attribute property. However, using data-[custom name] gives us the flexibility of accessing that attribute by highlightElement.dataset.site. So we don't need to use the getAttribute method to access an attribute.

Similar to setAttribute, there is another method removeAttribute() to remove an attribute from an element.

I hope this article will help you learn and understand JavaScript DOM manipulation. Please share the article and leave feedback and suggestions in the comment box below.