Mehedi Hasan thecodermehedi

A Modern Way to Create a Dialog or Modal Without JavaScript (Pure HTML and CSS Only) in 2025

This example demonstrates how to build a fully functional dialog/modal using only HTML and CSS.

HTML Structure

<!-- HTML Structure for the Dialog -->
<input type="checkbox" id="dialog-toggle" class="hidden">
<label for="dialog-toggle" class="dialog-open">Open</label>
<div class="dialog-backdrop">

Problem

browser-external:events:9 Module "events" has been externalized for browser compatibility. Cannot access "events.EventEmitter" in client code. See https://vite.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.

Solution:

i used this package to fix the problem: vite-plugin-node-polyfills

pnpm install --save-dev vite-plugin-node-polyfills

Usage

Setup Postgresql

run postgresql with systemctl

Install postgres

latest

sudo pacman -S postgresql

specific version

find version & build from source

Problem: Property 'user' does not exist on type 'Request<ParamsDictionary, any, any, ParsedQs, Record<string, any>>'

When working with Express and jsonwebtoken, it's better to use res.locals to store user-related data rather than modifying the req object directly. This approach adheres to best practices and avoids potential issues with modifying the req object.

Here’s why:

Separation of Concerns: res.locals is designed for passing data to subsequent middleware or templates. It keeps the request object clean and unmodified.
Middleware-Safe: Using res.locals ensures that the data is available to other middleware without interfering with the original request object.

Instead of:

node -e "console.log(require('crypto').randomBytes(64).toString('hex'))" | wl-copy

<script src="https://unpkg.com/react-scan/dist/auto.global.js"></script>

CORS in Depth: The Last Word for Web Developers

By now, every web developer has heard of Cross-Origin Resource Sharing-or CORS for short-but few actually understand it. In this post, we attempt to explain CORS from the very ground zero up to the most common pitfalls and the best practices using the technology. Be it an experienced developer or a candidate aiming to ace your software engineering interview; this article will equip you with the knowledge needed to handle CORS.

What is CORS? The Same-Origin Policy Before explaining CORS, there is a need to have an understanding of the Same-Origin Policy. The Same-Origin Policy is a security policy implemented in all web browsers. It confines how resources from one origin interact with resources from another. An origin is defined as the combination of: Protocol, for example - https:// Domain, for example - example.com Port, for example - :3000

	# fnm
	eval "$(fnm env)"

	# add fnm autocomplete
	fnm completions --shell=zsh > ~/.config/zsh/completions/_fnm # you can run this once and then comment out
	fpath+=~/.config/zsh/completions/_fnm
	autoload -U compinit
	compinit

	# autoload .nvmrc

	@import url('https://fonts.googleapis.com/css?family=Lato:400,700\|Lora\|Playfair+Display:700i,900');

	html,
	body {
	margin: 0;
	width: 100%;
	}

	h1,
	h2,