There was a post today by the creator of AutoSend - https://www.linkedin.com/feed/update/urn:li:activity:7452373365497085952/ - and I remembered about a Google Sheet tool I wrote in Google App Script that would validate email ids. Not so robust but enough to weed out bad email ids.

Open a new Google Sheet and goto Extensions > Apps Script

Delete

function myFunction() {
  
}

and paste this instead :

function onOpen()
{
  main();
}

function main()
{
  var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  var ui = SpreadsheetApp.getUi();

  ui.createMenu('Domains')
      .addItem('Email Cleaner', 'EmailChecker_OneByOne')      
      .addToUi();
    
  Logger.log("init");

}

function EmailChecker_OneByOne()
{  
  var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = spreadsheet.getActiveSheet();  
  var firstrow = 2;
  var range = sheet.getRange(firstrow, 1, sheet.getLastRow() - firstrow + 1, 1);
  var data = range.getValues();

  sheet.getRange('B1').setValue("Valid Email").setHorizontalAlignment("center").setFontWeight('bold');  
  sheet.getRange('C1').setValue("Status").setHorizontalAlignment("center").setFontWeight('bold');
  sheet.getRange('D1').setValue("Answers").setHorizontalAlignment("center").setFontWeight('bold');
  sheet.getRange('E1').setValue("Is Disposable").setHorizontalAlignment("center").setFontWeight('bold');


  for (var i = 0; i < data.length; i++)
  {
    if (data[i] == "") continue;
    
    var domain = String(data[i]).split('@').pop();
    var response = JSON.parse(UrlFetchApp.fetch("https://dns.google/resolve?name=" + domain + "&type=MX"));

    if (!response.error)
    {      
      if (!response.Answer) answers_length = 0; else answers_length = response.Answer.length;
    }

    disposable = isDisposable(data[i]);

    if (answers_length > 0)
    {
      sheet.getRange('B' + (i + 2)).setValue(data[i]);
    }

    sheet.getRange('C' + (i + 2)).setValue(response.Status);
    sheet.getRange('D' + (i + 2)).setValue(answers_length);
    sheet.getRange('E' + (i + 2)).setValue(disposable);
    
    SpreadsheetApp.flush();

    Logger.log(response);
  }  
}

function isDisposable(email)
{
  // https://open.kickbox.com/v1/disposable/mail%40anjanesh.biz
  var url = "https://open.kickbox.com/v1/disposable/" + encodeURI(email);
  var response = JSON.parse(UrlFetchApp.fetch(url));
  return response.disposable;
}

And save to Drive.

Now, go back to the spreadsheet and reload the page. (F5 or CMD + R). You should see a new menu item called Domains next to Help. Don't click on it yet.

Now Enter Email in A1 and paste a list of email ids you want validated in column A. Now click on Domains > Email Cleaner.

You'll get a popup saying "Authorisation required" - "A script attached to this document needs your permission to run." - Click on Ok.

You'll get one popup - "Google hasn’t verified this app" - click on Advanced.

Continue only if you understand the risks and trust the developer (yourgmail@gmail.com). Click on Go to Untitled project (unsafe)

Google will ask for access. Grant it access.

You should see columns B, C, D and E populated.

https://youtu.be/hcWmCsruG1E

The connect to external service is to connect to Google's JSON API for DNS over HTTPS (DoH) - https://developers.google.com/speed/public-dns/docs/doh/json

For example an email like johnsmith@yahoo.in we cross-check MX records with Google's public DNS checker :

https://dns.google/resolve?name=johnsmith@yahoo.in&type=MX

Many mass mailing solutions will suspend your account if the bounce rate is very high - and this happens even when the collection is legit - like when you have email ids written down on paper material at in-person events.

What would be really cool if AutoSend could be used to send out emails within Google Spreadsheets right Yogini Bende?

This was my first time I was hearing of picoclaw and I wasn't perturbed. Everyday something in the AI world is coming up and I can no longer keep track of these. I wanted to try openclaw but refrained when I read about agents performing actions automatically on your behalf. And people are reportedly buying multiple Mac Minis for this !?! But what I saw in the video about picoclaw was that it can run even on 10MB of RAM because it doesn't really run the agent on your local device. I mean ... the agent is on your local device but the LLM isn't.

So I decided to give this a shot on my Windows laptop - the expendable laptop.

The docs on the homepage (https://picoclaw.net/#install) says just this :

git clone https://github.com/sipeed/picoclaw.git
cd picoclaw && picoclaw onboard
picoclaw agent
# Or send a single message:
picoclaw agent -m "Hello, introduce yourself"

This is very misleading. Because you can't just cd into a just cloned directory and run a binary esp. if it doesn't exist. The directory in this GitHub has no executable - https://github.com/sipeed/picoclaw

First of all, you need to run this in a Linux environment so I used WSL2 on Windows which was already loaded with Ubuntu 22.04.

git clone https://github.com/sipeed/picoclaw.git

The folder seems to be go project so the project had to be built with the go compiler. Check for your go version - it requires almost the latest version - mine was very much outdated since I don't code in go yet.

go version
go version go1.18.1 linux/amd64

Update go.

sudo apt remove golang-go -y && sudo apt autoremove -y
sudo rm -rf /usr/local/go
wget https://go.dev/dl/go1.25.7.linux-amd64.tar.gz
sudo tar -C /usr/local -xzf go1.25.7.linux-amd64.tar.gz
vi ~/.bashrc

Now add this line to the very bottom of ~/.bashrc

export PATH=$PATH:/usr/local/go/bin

Then execute these :

source ~/.bashrc
go version
rm go1.25.7.linux-amd64.tar.gz
make deps
make build
cd build
./picoclaw onboard

You should see something like this on your WSL2 terminal :

anjanesh@ZEROBOOKULTRA:~/picoclaw/build$ ./picoclaw onboard
🦞 picoclaw is ready!

Next steps:
  1. Add your API key to /home/anjanesh/.picoclaw/config.json
     Get one at: https://openrouter.ai/keys
  2. Chat: picoclaw agent -m "Hello!"

I signed up at openrouter.ai and got myself an API key.

vi /home/anjanesh/.picoclaw/config.json

Just edit it to enter the openrouter.ai key

"openrouter": {
  "api_key": "enter-your-openrouter-API-key-here",
  "api_base": ""
}

Also, you need to edit the default provider and model.

  "agents": {
    "defaults": {
      "workspace": "~/.picoclaw/workspace",
      "restrict_to_workspace": true,
      "provider": "openrouter",
      "model": "openai/gpt-5.2",
      "max_tokens": 8192,
      "temperature": 0.7,
      "max_tool_iterations": 20
    }
  },

Now if you enter a prompt like this :

./picoclaw agent -m "What does the company Growthink do ?"

After a whole lot of info lines being printed for about 1-2 minutes, I get the answer as :

2026/02/19 18:00:54 [2026-02-19T12:30:54Z] [INFO] tool: Tool execution completed {tool=web_fetch, duration_ms=435, result_length=93}
2026/02/19 18:01:00 [2026-02-19T12:31:00Z] [INFO] agent: LLM response without tool calls (direct answer) {content_chars=748, agent_id=main, iteration=12}
2026/02/19 18:01:01 [2026-02-19T12:31:01Z] [INFO] agent: Response: Growthink is a business consulting firm (founded in 1999) that helps entrepreneurs and companies grow and raise capit... {agent_id=main, session_key=agent:main:main, iterations=12, final_length=748}

🦞 Growthink is a business consulting firm (founded in 1999) that helps entrepreneurs and companies grow and raise capital. In practice, they provide:

- **Business planning** (business plan writing/consulting and related strategy work)
- **Market research** (industry/market/competitive research to support decisions and fundraising)
- **Investment banking / capital raising support** (helping companies prepare investor materials, refine the investor story/financials, and run parts of the fundraising process)

Sources: Growthink “Services” page (Business Planning, Market Research, Investment Banking) https://www.growthink.com/services and Growthink “About” pages https://www.growthink.com/about-us / https://www.growthink.com/about/.

Why does a CLI still take so much time that doesn't require compute power on your device (and I'm on a 200 Mbps line) is beyond me.

PS: I loaded $10 credits to my openrouter.ai account to try other models. Pricing (https://openrouter.ai/pricing) says 25+ free models and 4 free providers on the free tier.

There is a local end-point we have that spits a bit of JSON data

http://localhost:3100/transactions

[
  {
    "id": "1",
    "amount": 100,
    "type": "Expense",
    "description": "Restaurant",
    "category": "Food",
    "created_at": "2023-03-15T23:00:00"
  },
  {
    "id": "2",
    "amount": 159,
    "type": "Expense",
    "description": "Gas",
    "category": "Car",
    "created_at": "2023-03-15T23:00:00"
  },
  {
    "id": "3",
    "amount": 500,
    "type": "Income",
    "description": "Salary",
    "category": "",
    "created_at": "2023-03-15T23:00:00"
  }
]

When we do something like this :

const response = await fetch('http://localhost:3100/transactions');
const transactions = await response.json();

We don't know (in the code) what kind of data we're getting before-hand unless we inspect the JSON response. But if we have the blueprint ready and really know what are the possible response values back, we can define this hard-coded in as TypeScript types which is the very core of TypeScript.

type TransactionType = 'Income' | 'Expense' | 'Saving' | 'Investment';

interface Transaction
{
    id: number;
    type: TransactionType,
    category?: string,
    description: string,
    amount: number,
}

const response = await fetch('http://localhost:3100/transactions');
const transactions: Transaction[] = await response.json();
if (!Array.isArray(transactions)) return <p>No transactions found.</p>;

return (<section className="space-y-4">
    {transactions.map(transaction => <div key={transaction.id}>
        <TransactionItem
            type={transaction.type}
            category={transaction.category}
            description={transaction.description}
            amount={transaction.amount}
        />
    </div>)}
</section>)

Here we “tell” the TypeScript engine that const transactions would be of type Transaction and also it would be an array (of Transactions).

PS: Here TransactionItem is a custom component that does a whole lot of HTML with DIVs, formatting and styling.

But Hashnode recently made some changes to their blogging system where the front-end seem to sit on a Vercel.

php blog.rss.php
PHP Warning:  file_get_contents(https://anjanesh.dev/rss.xml): failed to open stream: HTTP request failed! HTTP/1.0 429 Too Many Requests

It looks we've hit a Vercel rate limit, as per https://docs.vercel.com/docs/rest-api/reference/welcome#rate-limits. But I got it working using their GraphQL API though - https://docs.hashnode.com/quickstart/introduction

function fetch_hashnode_posts($domain)
{
    $url = "https://gql.hashnode.com";

    $query = '
    query {
      publication(host: "' . $domain . '") {
        posts(first: 10) {
          edges {
            node {
              title
              brief
              url
              publishedAt
              coverImage {
                url
              }
            }
          }
        }
      }
    }';

    $ch = curl_init($url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_POST, true);
    curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode(['query' => $query]));
    curl_setopt($ch, CURLOPT_HTTPHEADER, [
        'Content-Type: application/json',
        'User-Agent: My-Hashnode/2.5'
    ]);

    $response = curl_exec($ch);
    $result = json_decode($response, true);
    curl_close($ch);

    return $result;
}

This has got me interested in knowing more about GraphQL which seem to be the way forward from REST API, esp RSS feeds.

Initially I never used to push migration files to GitHub and I ended up having to do python make migrations as well as python manage.py migrate on the server - whether it was manually or via a pipeline.

There was one common pitfall to this which I stumbled on many times only to figure it out later - this post is to remind me of how to come out of that pit.

python mange.py makemigrations would always say “No changes detected” even when you had a model in a brand new app.

Note: This is only relevant to new Django ‘apps’ created (or pulled from Git) - if you had already done makemigrations and migrate on an app previously and it worked then running the same for the second time would work. The reason why it doesn’t work for the first time is because Django looks for a migrations folder and the __init__.py file in the migrations folder for makemigrations to work.

Goto to the app, say it be booking and create a migrations folder and create an empty __init__.py file in it. Now run python mange.py makemigrations, it should work as expected.

cd booking
mkdir migrations
cd migrations
touch __init__.py
cd ../..
python manage.py makemigrations
python manage.py migrate

This is not a tutorial on Django or React - this article shows how to bind React in Django using Inertia instead of using API endpoints using DRF. So I am cutting short adding models in Django etc to delve directly into the front-end usage sending hardcoded props to React code.

cd workspace/django
mkdir inertia-django-vite-react-minimal
cd inertia-django-vite-react-minimal
python3 -m venv venv
source venv/bin/activate
pip install django==5.1.5
django-admin startproject inertia_django_vite_react_minimal .
pip install django-vite==3.0.6 inertia-django==1.1.0 whitenoise==6.8.2
python manage.py startapp app

Install Node if you haven't already have - minimum version required is version 22.0.0

touch package.json
code .

Add this to package.json :

{
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "vite": "^6.0.11"
    },
    "dependencies": {
        "@inertiajs/progress": "^0.2.7",
        "@inertiajs/react": "^2.0.3",
        "@types/node": "^22.10.10",
        "@vitejs/plugin-react": "^4.3.4",
        "react": "^19.0.0",
        "react-dom": "^19.0.0"
    }
}

npm install

If you get something like this because you already have an older NodeJS installed, either re-install NodeJS version 22.0 or later or use nvm.

npm warn EBADENGINE Unsupported engine {
npm warn EBADENGINE   package: 'vite@6.0.11',
npm warn EBADENGINE   required: { node: '^18.0.0 || ^20.0.0 || >=22.0.0' },
npm warn EBADENGINE   current: { node: 'v21.7.3', npm: '10.9.0' }
npm warn EBADENGINE }
npm warn deprecated lodash.isequal@4.5.0: This package is deprecated. Use require('node:util').isDeepStrictEqual instead.

I have nvm installed so I had to do nvm install 22

touch vite.config.ts

Add this to vite.config.ts

import { defineConfig } from "vite";
import { resolve } from "path";
import react from "@vitejs/plugin-react";

export default defineConfig({
  root: resolve("./app/static/src"),
  base: "/static/",
  plugins: [react()],
  build: {
    outDir: resolve("./app/static/dist"),
    assetsDir: "",
    manifest: "manifest.json",
    emptyOutDir: true,
    rollupOptions: {
      // Overwrite default .html entry to main.tsx in the static directory
      input: resolve("./app/static/src/main.tsx"),
    },
  },
});

python manage.py migrate
python manage.py runserver
# Open a new tab in the terminal in the same project directory and run
npm run dev

In inertia_django_vite_react_minimal/urls.py you should have URLs of app

from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path('admin/', admin.site.urls),
    path("", include("app.urls")), # Include app's URLs 
]

Create a file called urls.py in the app folder.

In app/urls.py let's create the home and about URLs:

from django.urls import path

from . import views

urlpatterns = [
    path("", views.index, name="index"),
    path("about", views.about, name="about"),
]

And in the views.py :

from django.http import HttpRequest
from django.shortcuts import render
from inertia import render as inertia_render # So that we can keep using django's default render() for non Inertia/React pages
from time import sleep

def index(request):
    return inertia_render(request, "Index", props={"name": "World"})


def about(request):
    sleep(2.5) # This is to show the loading progress indicator on the front-end using the @inertiajs/progress package
    return inertia_render(request, "About", props={"pageName": "About"})

Create a folder called templates in the app folder.

In the templates folder create file called index.html paste this content in it :

{% load django_vite %}
<!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" />
    <meta name="csrf-token" content="{{ csrf_token }}">

    {% if debug %}
    <script type="module">
    import RefreshRuntime from 'http://localhost:5173/static/@react-refresh'
    RefreshRuntime.injectIntoGlobalHook(window)
    window.$RefreshReg$ = () => {}
    window.$RefreshSig$ = () => (type) => type
    window.__vite_plugin_react_preamble_installed__ = true
    </script>
    {% endif %}

  {% vite_hmr_client %}
  {% vite_asset 'main.tsx' %}

  <title>Inertia + Django + Vite + React minimal</title>
</head>

<body>
  {% block inertia %}{% endblock %}
</body>

</html>

The http://localhost:5173/static/@react-refresh is for hot reload in development mode - when DEBUG is true is in settings.py - when you want the front-end to reload automatically on changes in the React files. Reference: https://stackoverflow.com/a/77971927/126833

Create a folder called static in the app folder and create a sub-folder called src In src create a file called main.tsx and have this in it :

import "vite/modulepreload-polyfill";
import { createRoot } from "react-dom/client";
import { createInertiaApp } from "@inertiajs/react";
import { InertiaProgress } from '@inertiajs/progress';
import axios from 'axios';
import { Page } from "@inertiajs/core";
import React from 'react';  // Added this import
document.addEventListener('DOMContentLoaded', () => {

    const csrfToken = document.querySelector('meta[name=csrf-token]').content;
    axios.defaults.headers.common['X-CSRF-Token'] = csrfToken;

    InertiaProgress.init();

    createInertiaApp({
        resolve: (name) => import(`./pages/${name}.tsx`),
        setup({ el, App, props }: {
            el: HTMLElement,
            App: React.ComponentType<{ page: Page }>,
            props: any
        }) {
            const root = createRoot(el);
            root.render(<App {...props} />);
        },
    });

});

Create 2 files in the app/static/src/pages folder - one named Index.tsx and the other named About.tsx - these are pure React code in TypeScript.

Index.tsx

import React from 'react';
import { Link, usePage } from '@inertiajs/react';

export default function Index() {

  const { app_name } = usePage().props;

  return (
      <div>
          <h1>{app_name}</h1>
          <h1>Welcome to the Home Page</h1>
          <Link href="/about">About</Link>
      </div>
  );
}

About.tsx

import React from 'react';
import {Link, usePage} from '@inertiajs/react';

export default function About() {

  const { app_name } = usePage().props;

  return (
      <div>
          <h1>{app_name}</h1>
          <h1>About Page</h1>
          <Link href="/">Back to Home</Link>
      </div>
  );
}

Create a folder in app called middleware and in middleware create a file called mInertia.py (I purposely didn't want to name it inertia.py incase of conflicts due to the existing file of the same name in packages)

app/middleware/mInertia.py

from inertia import share
from django.conf import settings
from django.contrib.auth import get_user_model


class InertiaShareMiddleware:
    def __init__(self, get_response):
        self.get_response = get_response

    def __call__(self, request):
        # Share data that should be available to all components
        share(
            request,
            app_name=settings.APP_NAME, # This is set in settings.py
            user=lambda: self._get_user_data(request),
            user_count=lambda: get_user_model().objects.count(),
            # Add more shared data as needed
        )

        return self.get_response(request)

    def _get_user_data(self, request):
        """Format user data for frontend components"""
        if request.user.is_authenticated:
            return {
                'id': request.user.id,
                'email': request.user.email,
                'name': request.user.get_full_name(),
                'is_staff': request.user.is_staff,
            }
        return None

Create a file called context_processors.py in inertia_django_vite_react_minimal - this is to send the DEBUG value with the keyname debug to the front-end template to use as {% if debug %} ... {% endif %}

inertia_django_vite_react_minimal/context_processors.py :

from django.conf import settings

def debug_mode(request):
    return {'debug': settings.DEBUG}

There a number of edits in settings.py (inertia_django_vite_react_minimal/settings.py) :

import os
import re
.
.
.
DEBUG = True
APP_NAME = "Django with Inertia using React" # This was added
ALLOWED_HOSTS = ["*"]

# Application definition

INSTALLED_APPS = [
    'whitenoise.runserver_nostatic', # This was added
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'django_vite', # This was added
    'inertia', # This was added
    'app', # This was added
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'whitenoise.middleware.WhiteNoiseMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'inertia.middleware.InertiaMiddleware', # This was added
    'app.middleware.mInertia.InertiaShareMiddleware', # This was added
]
.
.
.
# django-vite settings
# https://github.com/MrBin99/django-vite
DJANGO_VITE_DEV_MODE = DEBUG  # DEBUG - follow Django's dev mode

# Where ViteJS assets are built.
DJANGO_VITE_ASSETS_PATH = BASE_DIR / "app" / "static" / "dist"

# Vite 3 defaults to 5173. Default for django-vite is 3000, which is the default for Vite 2.
DJANGO_VITE_DEV_SERVER_PORT = 5173

# Output directory for collectstatic to put all your static files into.
STATIC_ROOT = BASE_DIR / "staticfiles"

DJANGO_VITE_MANIFEST_PATH = os.path.join(STATIC_ROOT, "manifest.json")

# Include DJANGO_VITE_ASSETS_PATH into STATICFILES_DIRS to be copied inside
# when run command python manage.py collectstatic
STATICFILES_DIRS = [DJANGO_VITE_ASSETS_PATH]

# Inertia settings
INERTIA_LAYOUT = BASE_DIR / "app" / "templates/index.html"

# Vite generates files with 8 hash digits
# http://whitenoise.evans.io/en/stable/django.html#WHITENOISE_IMMUTABLE_FILE_TEST
def immutable_file_test(path, url):
    # Match filename with 12 hex digits before the extension
    # e.g. app.db8f2edc0c8a.js
    return re.match(r"^.+\.[0-9a-f]{8,12}\..+$", url)

Now when you goto http://localhost:8000/ (I’m assuming that python manage.py runserver and npm run dev are already running) you should see this which is served by app/static/src/Pages/Index.tsx :

And on clicking About, you should be able to see the About Page page loading in 2 and half seconds with a blue progress indicator showing at the top of the page which is processed by @inertiajs/progress which we added in package.json.

GitHub repo : https://github.com/anjanesh/inertia-django-vite-react-minimal/

Let's say you have on your WSL (which is Ubuntu by default, so I am assuming Ubuntu 24.04 here) running django as python manage.py runserver on the default port of 8000.

Check for the IP Address on your WSL instance using ifconfig. Note down the IP address.

$ ifconfig
eth0: flags=4163<UP,BROADCAST,RUNNING,MULTICAST>  mtu 1500
        inet 112.12.14.190  netmask 255.255.240.0  broadcast 112.12.15.255
        inet6 xxx::215:xxx:xxx:6423  prefixlen 64  scopeid 0x20<link>
        ether 00:xx:xx:xx:xx:23  txqueuelen 1000  (Ethernet)
        RX packets 3120  bytes 384154 (384.1 KB)
        RX errors 0  dropped 0  overruns 0  frame 0
        TX packets 1708  bytes 155068 (155.0 KB)
        TX errors 0  dropped 0 overruns 0  carrier 0  collisions 0

lo: flags=73<UP,LOOPBACK,RUNNING>  mtu 65536
        inet 127.0.0.1  netmask 255.0.0.0
        inet6 ::1  prefixlen 128  scopeid 0x10<host>
        loop  txqueuelen 1000  (Local Loopback)
        RX packets 20  bytes 2102 (2.1 KB)
        RX errors 0  dropped 0  overruns 0  frame 0
        TX packets 20  bytes 2102 (2.1 KB)
        TX errors 0  dropped 0 overruns 0  carrier 0  collisions 0

The IP address on this Ubuntu instance at WSL is 112.12.14.190.

Now open PowerShell in administrator mode on your host (Windows 11 laptop) and enter

netsh interface portproxy add v4tov4 listenport=8005 listenaddress=0.0.0.0 connectport=8000 connectaddress=112.12.14.190

This would listen to your WSL’s port 8000 and forward it to your Windows 11 at port 8005.

Now if you open the browser and enter http://localhost:8005 in the Address bar then you should be able to see the Django powered website running on your WSL in your Windows’ browser.

Now, if you want to stop listening to port 8005 or / and want to use port 8005 for something else, then you can de-register listening to port 8005 by :

netsh interface portproxy delete v4tov4 listenport=8005 listenaddress=0.0.0.0

Though I have mentioned WSL as the the OS that is the ‘guest’ on Windows, it can be applied to other platforms like VMWare or VirtualBox but most of these tools have a GUI for port-forwarding. Hence I’ve specifically mentioned WSL which is a 100% terminal based on Windows 10/11.

1. One is environ which was last released in 2007 - https://pypi.org/project/environ/ - which is Python 2 based. We don't want this anymore.

2. What we normally use in a pure python script is python-environ - https://pypi.org/project/python-environ/ - last released in 2020 - but the page is all about the next environ pypi package I've mentioned about - django-environ

3. Then we have django-environ which is what is the latest - https://pypi.org/project/django-environ/ - last released in 2023 - this works perfectly on non-Django environments as well. Since its just a wrapper and also referred to by python-environ package page, we are better off using this package only.

python -m pip install environ
Collecting environ
  Downloading environ-1.0.tar.gz (2.6 kB)
  Preparing metadata (setup.py) ... done
Installing collected packages: environ
  DEPRECATION: environ is being installed using the legacy 'setup.py install' method, because it does not have a 'pyproject.toml' and the 'wheel' package is not installed. pip 23.1 will enforce this behaviour change. A possible replacement is to enable the '--use-pep517' option. Discussion can be found at https://github.com/pypa/pip/issues/8559
  Running setup.py install for environ ... done
Successfully installed environ-1.0

(env) PS D:\> python .\test.py
Traceback (most recent call last):
  File "D:\test.py", line 5, in <module>
    import environ
  File "D:\env\lib\site-packages\environ.py", line 114
    raise ValueError, "No frame marked with %s." % fname
                    ^
SyntaxError: invalid syntax
(env) PS D:\> python -m pip uninstall environ
Found existing installation: environ 1.0
Uninstalling environ-1.0:
  Would remove:
    d:\env\lib\site-packages\environ-1.0-py3.10.egg-info
    d:\env\lib\site-packages\environ.py
Proceed (Y/n)? Y
  Successfully uninstalled environ-1.0
(env) PS D:\> python .\test.py
Traceback (most recent call last):
  File "D:\test.py", line 5, in <module>
    import environ
ModuleNotFoundError: No module named 'environ'
(env) PS D:\> python -m pip install python-environ
Collecting python-environ
  Using cached python_environ-0.4.54-py2.py3-none-any.whl
Installing collected packages: python-environ
Successfully installed python-environ-0.4.54

(env) PS D:\> python -m pip uninstall python-environ
Found existing installation: python-environ 0.4.54
Uninstalling python-environ-0.4.54:
  Would remove:
    d:\env\lib\site-packages\environ\*
    d:\env\lib\site-packages\python_environ-0.4.54.dist-info\*
Proceed (Y/n)? Y
  Successfully uninstalled python-environ-0.4.54
(env) PS D:\> python -m pip install django-environ
Collecting django-environ
  Using cached django_environ-0.11.2-py2.py3-none-any.whl (19 kB)
Installing collected packages: django-environ
Successfully installed django-environ-0.11.2

Ever since I installed httpd on my macOS 15.1 using homebrew and configured my virtual hosts on it and upon macOS updates which resulted in a restart of the laptop, my virtual hosts websites stopped working.

After many updates I found that there’s an apache2 service also running in the background and upon going to local.myWebsite.com it was trying to detect the virtual host from Apache’s config and not the httpd’s one.

So I had to stop Apache2 and httpd and start httpd. Only then my virtual hosts were back running properly.

sudo apachectl stop
brew services stop httpd
brew services start httpd

For example, if you want to get the MX records of techcrunch.com, you can get it from here : https://dns.google/query?name=techcrunch.com&rr_type=MX&ecs= where the API endpoint is at https://dns.google/resolve?name=techcrunch.com&type=MX after which you can parse the data.

And the best part ? - its CORS enabled. Meaning you can fetch from client side JavaScript itself from any IP address.

Here's a demo to play with : https://anjanesh.s3.amazonaws.com/demo/google-dns.html

Also, if you want to use the latest and greatest features available in HTML5 and CSS3 we need to use Chrome (Chromium) because mPDF's creator himself has mentioned on newer CSS support will most likely not be implemented - quote from GitHub link :

mPDF as a whole is a quite dated software. Nowadays, better alternatives are available, albeit not written in PHP.

Use mPDF if you cannot use non-PHP approach to generate PDF files or if you want to leverage some of the benefits of mPDF over browser approach – color handling, pre-print, barcodes support, headers and footers, page numbering, TOCs, etc. But beware that a HTML/CSS template tailored for mPDF might be necessary.

If you are looking for state of the art CSS support, mirroring existing HTML pages to PDF, use headless Chrome.

mPDF will still be updated to enhance some internal capabilities and to support newer versions of PHP, but better and/or newer CSS support will most likely not be implemented.

I was okay with not having what was new 5 years ago like flex and grid but not today.

Until I stumbled upon browserless.io - it's like searching for a invisible needle in a burning haystack if you're not using the keyword docker in the search box. browserless does all the dirty work of installing not just chromium headless, but firefox and webkit headless as well. With browserless, you can open any URL or read an HTML page from a file parse the contents programmatically like you would normally do. The open-source code for the implementation is at https://github.com/browserless/browserless and can be installed on your server.

So far, to HTML to PDF conversion in browserless is only supported by the chromium driver and not firefox and webkit drivers.

cd test
mkdir html2pdf
cd html2pdf 
python3 -m venv env
source env/bin/activate
pip install playwright
playwright install

The final playwright install should show something like this :

Downloading Chromium 128.0.6613.18 (playwright build v1129) from https://playwright.azureedge.net/builds/chromium/1129/chromium-mac-arm64.zip
138.1 MiB [====================] 100% 0.0s
Chromium 128.0.6613.18 (playwright build v1129) downloaded to /Users/anjanesh-m2/Library/Caches/ms-playwright/chromium-1129
Downloading FFMPEG playwright build v1009 from https://playwright.azureedge.net/builds/ffmpeg/1009/ffmpeg-mac-arm64.zip
1 MiB [====================] 100% 0.0s
FFMPEG playwright build v1009 downloaded to /Users/anjanesh-m2/Library/Caches/ms-playwright/ffmpeg-1009
Downloading Firefox 128.0 (playwright build v1458) from https://playwright.azureedge.net/builds/firefox/1458/firefox-mac-arm64.zip
79.6 MiB [====================] 100% 0.0s
Firefox 128.0 (playwright build v1458) downloaded to /Users/anjanesh-m2/Library/Caches/ms-playwright/firefox-1458
Downloading Webkit 18.0 (playwright build v2051) from https://playwright.azureedge.net/builds/webkit/2051/webkit-mac-14-arm64.zip
68.2 MiB [====================] 100% 0.0s
Webkit 18.0 (playwright build v2051) downloaded to /Users/anjanesh-m2/Library/Caches/ms-playwright/webkit-2051

If you're on Ubuntu it may ask you to install some dependencies which you can do so using sudo apt-get install - the list of dependencies will be mentioned right after when you execute playwright install

Some of the dependencies for Ubuntu :

sudo apt-get install libwoff1 libopus0 libwebpdemux2 libharfbuzz-icu0 libenchant-2-2 libsecret-1-0 libhyphen0 libflite1 libegl1 libevdev2 libgles2 gstreamer1.0-libav

If you're experiencing difficulty on Windows try this :

cd test
mkdir html2pdf
cd html2pdf 
python -m venv env
.\env\Scripts\Activate.ps1
python -m pip install playwright
python -m pip show playwright
Name: playwright
Version: 1.46.0
Summary: A high-level API to automate web browsers
Home-page: https://github.com/Microsoft/playwright-python
Author: Microsoft Corporation
Author-email:
License: Apache-2.0
Location: C:\test\htm2pdf\env\Lib\site-packages
Requires: greenlet, pyee
Required-by:
cd C:\test\htm2pdf\env\Scripts
playwright install
cd C:\test\htm2pdf

Now create a file called convert.py with the following python code :

import asyncio
from playwright.async_api import async_playwright

async def html_to_pdf(html_file_path, pdf_file_path):
    async with async_playwright() as p:
        browser = await p.chromium.launch()
        page = await browser.new_page()

        # HTML file
        with open(html_file_path, 'r') as file:
            html_content = file.read()
        await page.set_content(html_content)

        # Save as PDF
        await page.pdf(path=pdf_file_path, print_background=True)

        await browser.close()

html_file = 'example.html'
pdf_file = 'output.pdf'
asyncio.run(html_to_pdf(html_file, pdf_file))

Now download this example.html file either from my AWS S3 link or my Bunny link.

If you run python convert.py you should see a PDF generated like this in the same current folder.

If you're interested in running browserless as a standalone service in a separate app, and can spare atleast $5 a month, try using DigitalOcean App Platform where you can provide a GitHub Container Registry URL which is docker pull ghcr.io/browserless/base:latest as mentioned here : https://github.com/browserless/browserless/pkgs/container/base

Enter the following details (in red) :

Use port 3000

This is the general idea - once docker is setup on a DigitalOcean App you can call the App URL as a service to send in the HTML content and generate the PDF as output.

Replace the URL (production-sfo.browserless.io) in the code mentioned here (https://docs.browserless.io/Libraries/playwright#python-playwright) with the DigitalOcean App Platform URL. It should work. And instead of p.firefox.connect it should be p.chromium.connect.

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
  browser = p.firefox.connect('wss://production-sfo.browserless.io/firefox/playwright?token=GOES-HERE')
  context = browser.new_context()
  page = context.new_page()
  page.goto('http://www.example.com', wait_until='domcontentloaded')
  print(page.content())
  context.close()

When I was in college in Coimbatore way back in 2001 I went to the main street in RS Puram just walking past all the shops on one side of the road. I finally hit a sign that read Your Search Ends here and saw there were no more shops as it was more-or-less like a dead end. Hopefully your search for a PDF generator too ends here !

Let's take an example model from Django docs. https://docs.djangoproject.com/en/5.0/topics/db/examples/many_to_one/

class Article(models.Model):
    headline = models.CharField(max_length=100)
    pub_date = models.DateField()
    reporter = models.ForeignKey(Reporter, on_delete=models.CASCADE)

    media_house = models.ForeignKey(MediaHouse, on_delete=models.CASCADE, null=True, blank=True) # Added, NEW
    some_other_model = models.ForeignKey(SomeOtherModel, on_delete=models.CASCADE, null=True, blank=True) # Added, NEW

Let's say you have a row with primary key 915 and it contains media_house_id as 0 and some_other_model_id also as 0. Now let's just try to save this just after retrieving the row.

try:
    article = Article.objects.get(pk=915)
    article.save()
except Exception as e:
    msg = str(e)

You would get an exception.

The database backend does not accept 0 as a value for AutoField.

This is because the row with primary key ID 915 has an entry of media_house_id equal to 0 and/or some_other_model_id equal to 0 for which Foreign Key constraint fails as there isn't an entry (row) in the MediaHouse and SomeOtherModel tables where the primary key for those tables are 0.

So instead, we call the clean method (for which we write a clean function in the model) to set the field to None if it's 0.

class Article(models.Model):
    headline = models.CharField(max_length=100)
    pub_date = models.DateField()
    reporter = models.ForeignKey(Reporter, on_delete=models.CASCADE)

    media_house = models.ForeignKey(MediaHouse, on_delete=models.CASCADE, null=True, blank=True) # Added, NEW
    some_other_model = models.ForeignKey(SomeOtherModel, on_delete=models.CASCADE, null=True, blank=True) # Added, NEW

    def clean(self):
        if self.media_house_id == 0:
            self.media_house_id = None
        if self.some_other_model_id == 0:
            self.some_other_model_id = None

And before calling the save() method, we just call clean() as well.

try:
    article = Article.objects.get(pk=915)
    article.clean() # NEW : Call clean() to convert fields' invalid values to valid values or None (Null in MySQL)
    article.save()    
except Exception as e:
    msg = str(e)

So, there are 2 forms with IDs form-1 and form-2 : form-1's action is post-1.php and form-2's action is post-2.php

So when the Submit 2 button (which is inside form-1) is clicked, it hits form-2 which is post-2.php and not post-1.php

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Button's Form Target</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <fieldset>
        <legend>Form 1</legend>
        <form id="form-1" action="post-1.php" method="post">
            First Name : <input type="text" name="first_name" id="first_name"/>
            <div style="margin-top:10px; display: flex; column-gap: 5px;">
                <button form="form-1">Submit 1</button>
                <button form="form-2">Submit 2</button>
            </div>
        </form>
    </fieldset>
    <br/>
    <fieldset>
        <legend>Form 2</legend>
        <form id="form-2" action="post-2.php" method="post">
            Last Name : <input type="text" name="last_name" id="last_name"/><br/>
        </form>
    </fieldset>    
  </body>
</html>

But let's say you don't want to use a full-blown framework for a dead-simple scenario where the entire PHP application is just one form of sorts ... and still want to make use to CSRF - then, you would need to write it from scratch and implement the security bit.

touch form.php
touch form-post.php
code .

form.php

<?php
session_start();
$_SESSION['token'] = md5(uniqid(mt_rand(), true));
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form</title>
</head>
<body>
    <form method="post" action="form-post.php">
        <input type="email" name="email" id="email" required />
        <input type="hidden" name="token" value="<?php echo $_SESSION['token'] ?? '' ?>" />
        <button type="submit">Submit</button>
    </form>    
</body>
</html>

form-post.php

<?php
session_start();

$token = htmlspecialchars($_POST['token']);

if (!isset($token) || $token !== $_SESSION['token'])
{
    die("Attack attempted");
}

# Re-Generate token so that hitting the refresh button invalidates the form submission
$_SESSION['token'] = md5(uniqid(mt_rand(), true));
?>
<h1>Form POSTed</h1>
<?php
echo "<pre>POST : \n";
print_r($_POST); echo "\n";
echo "SESSION :\n";
print_r($_SESSION);
echo "</pre>"
?>

php -S localhost:8004

Now browse to http://localhost:8004/form.php and submit and your should see a Form POSTed and now if you hit the refresh button - you should see a "Attack attempted" message. This is because a new token got generated on form submit and it doesn't match with the one in the session's data.

I didn't realize that this was even possible in my 20+ years of web development. I even had a debate with my colleague about not using it that way but we weren't in sync.

Apparently - if you set in your HTML <input type="text" id="first_name" /> , you don't need to do document.getElementById('first_name').value - instead, you can directly call first_name.value !!!

https://codepen.io/anjanesh/pen/GRLJZrj

Apparently, this is still valid and is also in the HTML spec.

the value of the id content attribute for all HTML elements that have a non-empty id content attribute and are in a document tree with window's associated Document as their root.

In almost all programming languages (or probably all ?), we access an index of an array / list using the square brackets notation with the index number in between.

For example, in python code we would do :

fruits = ['🍎', '🍐', '🍌']
print(fruits[1]) # will print 🍐

In a Django, which uses Jinja2 templating by default, when we set the values in context and send it across to the template, we use dot followed by the index to access the array index like this :

{{ fruits.1 }}

So, if we have something like this which has the fruit and the price of it, in the context,

fruits = [['🍎', 50], ['🍐', 35], ['🍌', 22]]
context = {'fruitsWithPrice': fruits}

then we would need to use fruit.0 and fruit.1 for each fruit.

{% for fruit in fruitsWithPrice %}
    {{ fruit.0 }} - ${{ fruit.1 }}<br/>
{% endfor %}

This is something I myself didn't know for a while too.

Download the relevant OCX files from :

• https://www.ocxme.com/files/MSCOMCTL

• https://www.ocxme.com/files/comdlg32

• https://www.ocxme.com/files/msflexgrid

and move them to this folder : C:\Windows\SysWOW64\

Now run this in command prompt (cmd.exe) as an Administrator :

cd C:\Windows\System32
C:\Windows\System32>regsvr32.exe C:\Windows\SysWOW64\MSCOMCTL.OCX
C:\Windows\System32>regsvr32.exe C:\Windows\SysWOW64\comdlg32.ocx
C:\Windows\System32>regsvr32.exe C:\Windows\SysWOW64\msflexgrid.ocx

Now run ProficiencyTest.exe - this uses text files as a database - this was at a time when I didn't know about SQL / RDMS (even though we had a subject on it !) and has no requirement to an internet connection - used books to learn - no StackOverflow, no YouTube, no ChatGPT and lastly, hardly any Google because Internet was not available (most of the time) until 2003 ! - I used Yahoo! in college but I don't recollect searching for programming solutions from the Internet - all I had was a VB6 book. And of course, my college's lab assistants helped me a lot in troubleshooting setup and configuration issues.

PS: Their site, https://www.sitraindia.org/ which was active in 2002 is no longer valid - the current site is sitra.org.in

Most of the functions / menus don't work because of the UI being very outdated.

Source : https://github.com/anjanesh/sitra

<!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>onhover Larger Image Popup / ToolTip</title>
    <script src="https://cdn.tailwindcss.com"></script>    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.1/flowbite.min.js"></script>    
</head>
<body>

    <div
        class="mt-5 ml-5 ring-2 ring-offset-2 group block w-32 aspect-w-10 aspect-h-7 rounded-lg bg-gray-100 overflow-hidden"
        data-popover-target="popover-default-1"
    >
        <img
            src="https://anjanesh.s3.amazonaws.com/island.webp"
            alt="Island"
            class="object-cover pointer-events-none"
            width="150"
        />
    </div>

    <div data-popover id="popover-default-1" role="tooltip" class="absolute z-10 invisible inline-block w-64 text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800">
        <div class="px-3 py-2 bg-gray-100 border-b border-gray-200 rounded-t-lg dark:border-gray-600 dark:bg-gray-700">
            <h3 class="font-semibold text-gray-900 dark:text-white">Island</h3>
        </div>
        <div class="px-3 py-2">
            <img
                src="https://anjanesh.s3.amazonaws.com/island.webp"
                alt="Island"
                class="object-cover pointer-events-none"
                width="750"
            />
        </div>        
    </div>

</body>
</html>

1. Don't use https://cdn.tailwindcss.com in production.

2. Also, for the thumbnail image, use an appropriate thumbnail sized version of the image instead of shrinking it using the width or height attributes.

Demo : https://anjanesh.s3.amazonaws.com/demo/onhover-Larger-Image-Popup-ToolTip.html

Now that we can sign-in using Azure AD, the Django default sign-in is left as is, and not used. But there still is a auth_user table created during makemigrations and migrate. the auth_user table is the one that Django references for the default Djangp's built-in user login.

If you are syncing the users in Django's default auth_user table with the Azure AD usernames, then you can auto-signin to the Django user system post logging in via Azure AD.

This is achieved by integrating a custom middleware.

Assuming your app's name is application, create a file called custom_middleware.py in the application folder.

Let us create a function containing the following code :

def getAzureADDetails(request):
    claims = request.identity_context_data._id_token_claims
    exclude_claims = ['iat', 'exp', 'nbf', 'uti', 'aio', 'rh']
    claims_to_display = {claim: value for claim, value in claims.items() if claim not in exclude_claims}
    return dict(claims_to_display)

The above is Microsoft's standard code for extracting user login info from the Azure AD session.

Now let's create the middleware class. The middleware class requires __call__ to be defined and a response to be returned.

Code before response = self.get_response(request) would be executed before the view is rendered, while code after response = self.get_response(request) would be executed after the view the rendered. We specifically need our logic to be inserted after response = self.get_response(request).

from ms_identity_web import IdentityWebPython

class CustomMiddleware:
    def __init__(self, get_response):
        self.get_response = get_response

    def __call__(self, request):
        print("Middleware: Custom code is running!")

        # Code to run before the view is called
        response = self.get_response(request)
        # Code to run after the view is called and before the response is returned

        azureAD = getAzureADDetails(request)

        # A user has logged in to the django application via the AD login
        if len(azureAD) > 0:

            claims = request.identity_context_data._id_token_claims

            try:
                user = User.objects.get(email=claims['preferred_username'])
                request.user = user
            except User.DoesNotExist:
                print("not able to find AD user from django's auth_users table")

        return response

So now enter 'application.custom_middleware.CustomMiddleware', in the MIDDLEWARE list in settings.py. For example, it should look similar to this sample snippet :

MIDDLEWARE = [
    'debug_toolbar.middleware.DebugToolbarMiddleware',
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'application.custom_middleware.CustomMiddleware', # This was inserted
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

Now, in views.py request.user.is_authenticated would be True when someone logs into your Django app via Microsoft's Azure Active Directory.

Note: here I have assumed that your auth_users table has the data filled in with your Azure Active Directory users. This can be done by an insert from another source when a new AD user logs in or is created.

HTMX is JavaScript-less AJAX for the end-user (developer). Under the hood, HTMX uses JavaScript by including its library.

The simplest example of using HTMX is by having an HTML <form> in your web page and some inputs a standard submit button. The JavaScript way to handle form submissions is the use e.preventdefault() React, Angular, Vue or Svelte and have client-side validation and then submit the form via JSON via axios or the like and get back a JSON response to the browser which the client-side framework will parse and re-render the component to update the DOM. All this is without refreshing the page via JavaScript code.

But the same non-refreshing page effect can be achieved via HTMX, except that, instead of returning a JSON from the server API call, we render back an HTML snippet from the server that's sent back to the browser and the entire HTML snippet is inserted into the webpage without page re-loading. It's still AJAX under the hood, but instead of JSON, it's HTML and you can do server-side validation just as if like you're submitting a traditional HTML form.

Here's an example (using vanilla PHP) where there exists a timer on the page just to show that the page doesn't get refreshed on clicking the submit button in the form - a full page refresh would reset the timer back to 0.

form-page.php :

<!DOCTYPE html>
<head>
    <title>HTMX Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous"/>
    <script src="https://unpkg.com/htmx.org@1.9.3"></script>
</head>
<body>

<div class="container mt-5 border border-danger">

    Content in red DIV with live time does not reset.<br/>

    <script type="text/javascript" charset="utf-8">
    let timer = 0;    
    setInterval(() =>
    {        
        timer += 1;
        document.getElementById('time').innerHTML = timer;
    }, 1000);
    </script>

    <div class="mt-2">Timer : <span id="time"></span></div>

    <form
        hx-post="form-post.php"
        hx-target="this"
        hx-swap="innerHTML"
    >
        <?php require_once "form-post.php" ?>
    </form>

</div>


</body>
</html>

The following php snippet inserted into the form-page above will be used for both GET and POST. Ideally, you would render different files in Laravel based on the REQUEST type.

form-post.php :

<?php
if (isset($_POST['name']) && isset($_POST['email']))
{
    ?>
    <div class="py-2">        
        <strong>Data POSTed</strong>
        <div>
            Name : <?php echo $_POST['name'] ?><br/>
            Email : <?php echo $_POST['email'] ?><br/>
        </div>
        <button
            type="button"
            hx-get="form-post.php"
            class="mt-3 btn btn-primary"
        >
            Add Data again
        </button>
    </div>
    <?php
}
else
{
    ?>
    <div class="py-2">
        <div class="form-group py-2">
            <label for="txt-name">Name</label>
            <input type="text" class="form-control" id="txt-Name" name="name" placeholder="Enter your name" />
        </div>
        <div class="form-group py-2">
            <label for="txt-Email">Email</label>
            <input type="email" class="form-control" id="txt-Email" name="email" placeholder="Enter your email address" />
        </div>        
        <button type="submit" class="btn btn-primary mt-1">Submit</button>
    </div>
    <?php
}
?>

Run this as php -S localhost:8001 in the terminal powershell and goto http://localhost:8001/form-page.php and click the submit button to see it in action - the timer will continue as it is (not from 0) since it's not a full page refresh.