Skip to content

Instantly share code, notes, and snippets.

View thecodermehedi's full-sized avatar
🧑‍💻
Solo Levelling

Mehedi Hasan thecodermehedi

🧑‍💻
Solo Levelling
View GitHub Profile
@thecodermehedi
thecodermehedi / solution.md
Last active April 10, 2025 07:02
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.
@thecodermehedi
thecodermehedi / postgresql_plus_arch-linux.md
Created March 14, 2025 00:02 — forked from NickMcSweeney/postgresql_plus_arch-linux.md
Getting postgresql running on Arch Linux

Setup Postgresql

run postgresql with systemctl

Install postgres

latest

sudo pacman -S postgresql

specific version

find version & build from source

@thecodermehedi
thecodermehedi / property-user-does-not-exist-on-type-requestparamsdictionary-any-any-parsedqs-recordstring-any.md
Last active March 30, 2025 23:44
Problem: Property 'user' does not exist on type 'Request<ParamsDictionary, any, any, ParsedQs, Record<string, any>>'

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:

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

Instead of:

@thecodermehedi
thecodermehedi / gensecret.md
Created March 4, 2025 15:10
JWT Secret Generator With NodeJS One Line command
node -e "console.log(require('crypto').randomBytes(64).toString('hex'))" | wl-copy
@thecodermehedi
thecodermehedi / .zshrc
Created February 20, 2025 02:17 — forked from unyo/.zshrc
.zshrc with fnm
# 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
@thecodermehedi
thecodermehedi / visualize-react-renders.md
Last active January 27, 2025 14:00
Add the following link to your index.html of react codebase to see renders on project ui in browser
<script src="https://unpkg.com/react-scan/dist/auto.global.js"></script>
@thecodermehedi
thecodermehedi / cors-in-depth-the-last-word-for-web-developers.md
Created December 24, 2024 09:25
What is CORS? - Cross-Origin Resource Sharing Explained

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

@thecodermehedi
thecodermehedi / medium.css
Created November 23, 2024 07:36
Compact typography for the web
@import url('https://fonts.googleapis.com/css?family=Lato:400,700|Lora|Playfair+Display:700i,900');
html,
body {
margin: 0;
width: 100%;
}
h1,
h2,
@thecodermehedi
thecodermehedi / ripple.min.css
Created November 23, 2024 06:35
Pure CSS implementation of Android Material design "ripple" animation
.ripple{position:relative;overflow:hidden;transform:translate3d(0,0,0)}.ripple:after{content:"";display:block;position:absolute;width:100%;height:100%;top:0;left:0;pointer-events:none;background-image:radial-gradient(circle,#000 10%,transparent 10.01%);background-repeat:no-repeat;background-position:50%;transform:scale(10,10);opacity:0;transition:transform .5s,opacity 1s}.ripple:active:after{transform:scale(0,0);opacity:.2;transition:0s}