A chat with Claude Code with Chrome Devtools MCP output boxes
Figured this out with Claude Code and Chrome DevTools MCP. It inspected the computed styles and fixed the issue with Tailwind — all in one flow. One of my most favorite MCPs. But I still went with a simpler solution: passing isBlurred=false to the HeroUI's Navbar.
HeroUI's Navbar in my app had backdrop-filter property set on the <nav />, trapping my fixed <div /> inside it. In the end, I fixed the issue by dropping that backdrop-filter value. The issue wasn't the position all along.
So it turns out that any ancestor with backdrop-filter (also transform, filter, perspective, contain: paint, or will-change) creates a new containing block for fixed elements — regardless of its own position value.
I kept debugging and inspecting every ancestor of the buttons for position values, made sure that all were static. But the buttons still sticked to the header instead of the bottom of the page on mobile.
TIL: backdrop-filter creates a new containing block for descendants with position: fixed. I had buttons in my <header /> that should've been fixed to the bottom of the viewport on mobile. But they kept sticking to the top instead — right under the navbar.
@frontendfocus.bsky.social shared an article by @ericwbailey.website on keyboard shortcuts the same week Tanstack Hotkeys library released. To someone who's obsessed with hotkeys in every app I build, this is a lucky opportunity to expand the know-how of the subject (in both theory and practice).
SQL code snippet for automatically updating an updated_at column by using a trigger and a trigger function in Postgres
Postgres doesn't have MySQL's ON UPDATE CURRENT_TIMESTAMP for auto-updating timestamps.
Here's the pattern I use in every project - one reusable function, attach to any table that needs it. No client-side date logic needed.
This is the kind of micro-polish that makes apps feel professional vs. "good enough".
Building textual.chat - an AI text editor where these details matter.
TypeScript code snippet with the usage of the use-tooltip-group hook
Usage is clean - just spread the props onto your tooltip components and add onMouseLeave to the container.
TypeScript code snippet with use-tooltip-group hook
The trick: track whether user is "in the group". Once they've triggered one tooltip, skip delays for subsequent items until they leave.
When mouse leaves the group, start a short window (e. g. 300ms) before resetting. This handles accidental mouse-outs.
A small UX detail I like to implement in every app with tooltips: smart delays without flickers.
First hover → normal delay (e. g. 500ms)
Moving between adjacent buttons → instant
Leave and return → delay resets
30 second demo + the React hook that makes it work 👇
Agents need explicit constraints + tests, CI, and docs as oracles, not just "build X".
Breaking complex features into adjacent-possible steps with tight feedback loops is better than vague prompts hoping for magic.
Just read this article on working with AI agents using Steven Johnson's framework (Seven Patterns of Innovation).
As someone unfamiliar with webhooks, I asked Claude to walk me through streak calculation in my habit-tracking app instead, using this mindset:
sunilpai.dev/posts/seven-...
As I reflect on my year, I just want to say thank you to @syntax.fm for all those tasty and really insightful treats. My personal favourite is one on mental health and neurodiversity.
@wesbos.com @tolin.ski You make my commutes way more valuable, keep it up!
Shipped a thing: emailcompat.dev
Paste your email HTML, see what breaks in Gmail/Outlook/Apple Mail before you send.
Built this for a job interview, got rejected, released it anyway. Some wild discoveries - Outlook literally uses Microsoft Word to render emails. In 2025.
Free, open source.
ImageCarousel.tsx component contents
React + Framer Motion? Skip the carousel libraries. This ~40-line snippet gives you clean directional animations with zero extra deps. Sometimes DIY is just better.
Here's a brief explanation:
- Private Constructor: Prevents direct instantiation of the class.
- Static Method `getInstance()`: Provides a global point of access to the instance.
- Single Instance: Ensures only one instance is created and reused.
supabaseClient.ts file contents with the Singleton pattern applied
Refactored my Supabase client setup into a Singleton.
Now there's a single source of truth, safe test behavior, and early error handling for misconfig.
One client across the app, no accidental re-creates — a clean, practical use of the pattern.
Rule from eslint.config.js to enforce explicit returns from arrow functions
I've decided to stick with explicit arrow function bodies in JS/TS—always using curly braces and a return. It might feel more verbose, but it keeps the Git diffs clean and makes adding logic later a breeze. Luckily, ESLint has a rule just for that. #JavaScript #TypeScript #CleanCode
An example .sql migration statements containing two lines annotated with -- noqa: CV10 comment to disable SQLFluff lint for them
Lastly, SQLFluff isn’t perfect — I’ve hit walls with parsing Postgres functions (especially with plpgsql).
I also had to learn how -- noqa works to ignore specific lines. E.g. -- noqa: CV10 next to a line disables rule on quoted literals for it.
Still worth it. Would do again.
Hope this helped!
GitHub workflow config file contents
I also added SQLFluff to CI so migrations and seeds are linted on every PR.
This runs SQLFluff via `pip` in GitHub Actions.
Here's the GitHub workflow config. Takes 20 lines and saves headaches in prod.
lint-staged.config.js file contents
I use Husky to run SQLFluff in pre-commit hooks with lint-staged.
Here's my lint-staged.config.js.
There's also a fix to transform the absolute paths to relative ones since when we run the command inside the Docker container, the paths are relative to the mounted volume, not our local file system.
scripts from package.json file
I added two npm scripts to my package.json to run SQLFluff with Docker:
- lint:sql (to lint files)
- fix:sql (to auto-format them)
So I don’t have to install Python or pip—just Docker.
Those commands automatically detect .sql files but can also take a path to a specific one as an argument.
.sqlfluff config file contents
SQLFluff is a linter & formatter for SQL, customizable and dialect-aware (Postgres in the case of Supabase).
You can run it via Docker (they provide an official image) or install it globally via pip/brew.
It reads from .sqlfluff config file in the root of your app.
Here’s what mine looks like.
yarn lint:sql command output inside a terminal window
Have a JavaScript-heavy project that uses
@supabase.com and wish you could lint your migrations and seeds like you do with ESLint?
I just set up SQLFluff in my app using Docker, Husky, lint-staged, and GitHub Actions to achieve consistency in my SQL code.
Sharing my setup here in case it helps ↓
Here are the links to my profile and achievements pages used in the post:
www.codecademy.com/profiles/dom...
www.codecademy.com/users/domhhv...
10 years (+1 week, totally forgot to post on the exact anniversary 😅) ago, as a CS sophomore, I signed up on Codecademy & got hooked on JS, HTML & CSS. Spent nights solving exercises—now I’m a Full-Stack Engineer, still just as excited about coding as I was back in my tiny dorm room. Time flies! 🚀
Well, there're actually a few sneak pics of my rigs in my feed ;)
I'm so, SO F***ING hyped for this. Housemarque announced their next IP, which looks like a true successor to Returnal, my most beloved game. Energy orbs fired in bullet-hell waves. Death-rebirth cycle. Sun (Saros) vs Moon (Returnal)? Indian vs Greek mythologies? Well, I can't wait for 2026 now!
