@frontendbysagar

Frontend Developer | Tailwind CSS enthusiastic | CSS Property Player

sagarpansuriya.in/
Joined August 2024
  • Tweets304
  • Following209
  • Followers26
56Media
๐ŸŽ‰ My first ๐—ก๐—ฎ๐˜๐—ถ๐˜ƒ๐—ฒ๐—ฃ๐—›๐—ฃ ๐—ฝ๐—น๐˜‚๐—ด๐—ถ๐—ป is live on the official site! Introducing ๐˜๐—ต๐—ฒ๐˜‚๐—ป๐˜„๐—ถ๐—ป๐—ฑ๐—ณ๐—ฟ๐—ผ๐—ป๐˜/๐—ป๐—ฎ๐˜๐—ถ๐˜ƒ๐—ฒ๐—ฝ๐—ต๐—ฝ-๐—ฎ๐˜‚๐—ฑ๐—ถ๐—ผ bringing seamless audio features to NativePHP projects. Check it out: nativephp.com/plugins/theunwโ€ฆ #PHP #OpenSource Thanks to @nativephp

NativePHP Audio

Audio player plugin for NativePHP Mobile apps

nativephp.com
1
3
23
961
๐—–๐—ผ๐—ป๐˜๐—ฎ๐—ถ๐—ป๐—ฒ๐—ฟ ๐—ค๐˜‚๐—ฒ๐—ฟ๐—ถ๐—ฒ๐˜€ ๐—ถ๐—ป ๐—ฅ๐—ฒ๐—ฎ๐—น ๐—–๐—ผ๐—บ๐—ฝ๐—ผ๐—ป๐—ฒ๐—ป๐˜ ๐—Ÿ๐—ถ๐—ฏ๐—ฟ๐—ฎ๐—ฟ๐—ถ๐—ฒ๐˜€: ๐—–๐—ผ๐—บ๐—ฝ๐—ผ๐—ป๐—ฒ๐—ป๐˜๐˜€ ๐—ง๐—ต๐—ฎ๐˜ ๐—™๐—ถ๐˜ ๐—”๐—ป๐˜†๐˜„๐—ต๐—ฒ๐—ฟ๐—ฒ Media queries ask how wide the screen is. Reusable components need to know how wide their slot is.
1
1
66
A practical guide to container queries, cqi units and Tailwind v4's @container variants. sagarpansuriya.in/blog/contaโ€ฆ

Container Queries in Real Component Libraries: Components That Fit Anywhere

Media queries ask how wide the screen is. Reusable components need to know how wide their slot is. A practical guide to container queries, cqi units and Tailwind v4's @container variants.

sagarpansuriya.in
2
5
Most performance budgets live in a doc nobody opens. Here's how to pick metrics, set numbers from real user data, and enforce them in CI with Lighthouse CI, size-limit and Vite. sagarpansuriya.in/blog/frontโ€ฆ

Frontend Performance Budgets That Actually Get Enforced

Most performance budgets live in a doc nobody opens. Here's how to pick metrics, set numbers from real user data, and enforce them in CI with Lighthouse CI, size-limit and Vite.

sagarpansuriya.in
7
Build NativePHP apps that keep working without a connection: SQLite as the source of truth, a sync queue, UUIDs, a Laravel sync API and conflict strategies that don't lose data. sagarpansuriya.in/blog/nativโ€ฆ

Offline-First NativePHP Apps: Local SQLite, a Sync Queue and Conflict Resolution

Build NativePHP apps that keep working without a connection: SQLite as the source of truth, a sync queue, UUIDs, a Laravel sync API and conflict strategies that don't lose data.

sagarpansuriya.in
10
Sagar Patel retweeted
Sridhar Vembu
@svembuOct 9
Indians have made a major contribution to America's technological prowess. Yet, a big part of America no longer wants us. Indians who are on a visa in the US face the painful prospect of uprooting the life you have built with hard work. Let this be the birth pains of a bold new future. Come back, let's build India ๐Ÿ™
3,286
7,657
650
36,422
3,012,237
Registrations are open for our October meetup! ๐Ÿ˜ ๐Ÿ“… Sunday, Oct 25, 2026 | 10:00 AM (Check-in: 09:45 AM) ๐Ÿ“ @ZealouSys, Safal Profitaire, Prahlad Nagar Grab your seat ๐Ÿ‘‡ go.allevents.in/6s07z
6
1
11
563
Sagar Patel retweeted
CodingwithRK@CodingwithRKOct 13
My first @nativephp paid plugin is released ๐Ÿฅณ NATIVEPHP RAZORPAY SDK This plugin will help you to integrate Razorpay seamlessly. And it was paid plugin so full support from my end. Please check it out: marketplace.codingwithrk.comโ€ฆ

Nativephp Razorpay SDK - CodingwithRK Marketplace

A NativePHP Mobile plugin that opens the Razorpay Standard Checkout UI on Android and iOS.

marketplace.codingwithrk.com
2
2
9
440
๐—” ๐—ฅ๐—ฒ๐˜‚๐˜€๐—ฎ๐—ฏ๐—น๐—ฒ ๐—•๐—น๐—ฎ๐—ฑ๐—ฒ ๐—–๐—ผ๐—บ๐—ฝ๐—ผ๐—ป๐—ฒ๐—ป๐˜ ๐—Ÿ๐—ถ๐—ฏ๐—ฟ๐—ฎ๐—ฟ๐˜† ๐—ณ๐—ผ๐—ฟ ๐—ช๐—ผ๐—ฟ๐—ฑ๐—ฃ๐—ฟ๐—ฒ๐˜€๐˜€ ๐˜„๐—ถ๐˜๐—ต ๐—ฆ๐—ฎ๐—ด๐—ฒ ๐—ฎ๐—ป๐—ฑ ๐—”๐—ฐ๐—ผ๐—ฟ๐—ป How to build a reusable Blade component library in a Roots Sage theme:
1
8
anonymous vs class components, props and slots, Tailwind-friendly attribute merging, and ACF flexible content. sagarpansuriya.in/blog/bladeโ€ฆ

A Reusable Blade Component Library for WordPress with Sage and Acorn

How to build a reusable Blade component library in a Roots Sage theme: anonymous vs class components, props and slots, Tailwind-friendly attribute merging, and ACF flexible content.

sagarpansuriya.in
5
Every search box eventually becomes a filter panel. I've seen this happen more than once. Search starts with one input. Then price. Location. Sorting. One more filter... Before you know it, you've built a whole UI for building queries. Instead of making users figure out which filters they need, they can just describe what they're looking for. I'd still keep filters for precise control, but I can see this being really useful for product discovery and large catalogs. Sponsored by @typesense. fandf.co/4xQ1QHn
Graphic showing the headline โ€œEvery search box is becoming a filter panel.โ€ A search box on the left points to a detailed filter panel on the right with price, brand, location, RAM, availability, rating, sorting, and condition options. At the bottom, the graphic asks, โ€œWhy not just let users say what they want?โ€ Sponsored by Typesense.

ALT Graphic showing the headline โ€œEvery search box is becoming a filter panel.โ€ A search box on the left points to a detailed filter panel on the right with price, brand, location, RAM, availability, rating, sorting, and condition options. At the bottom, the graphic asks, โ€œWhy not just let users say what they want?โ€ Sponsored by Typesense.

14
29
2
51
3,430
๐—ฃ๐—ฟ๐—ผ๐—บ๐—ฝ๐˜ ๐—”๐—œ ๐—–๐—ผ๐—ฑ๐—ถ๐—ป๐—ด ๐—”๐—ด๐—ฒ๐—ป๐˜๐˜€ ๐—Ÿ๐—ถ๐—ธ๐—ฒ ๐—ฎ ๐—ง๐—ฒ๐—ฐ๐—ต ๐—Ÿ๐—ฒ๐—ฎ๐—ฑ AI coding agents do their best work from specs, not wishes. How to brief Claude code, Cursor or Copilot like a TL: context files, acceptance criteria, plans and verification loops. sagarpansuriya.in/blog/prompโ€ฆ

Prompt AI Coding Agents Like a Tech Lead Writes Tickets

AI coding agents do their best work from specs, not wishes. How to brief Claude Code, Cursor or Copilot like a tech lead: context files, acceptance criteria, plans and verification loops.

sagarpansuriya.in
1
39
Sagar Patel retweeted
Sahil
@sahildarzOct 5
Orchestration's not about making AI smarter, it's about making you less dumb. Plain prompting's a black box. Orchestration's a leaky bucket you're trying to patch mid-flood.
1
1
32
๐—”๐—ฐ๐—ฐ๐—ฒ๐˜€๐˜€๐—ถ๐—ฏ๐—น๐—ฒ ๐— ๐—ผ๐—ฑ๐—ฎ๐—น๐˜€ ๐˜„๐—ถ๐˜๐—ต ๐—ก๐—ฎ๐˜๐—ถ๐˜ƒ๐—ฒ <๐—ฑ๐—ถ๐—ฎ๐—น๐—ผ๐—ด> ๐—ฎ๐—ป๐—ฑ ๐—ฎ ๐—ง๐—ถ๐—ป๐˜† ๐—”๐—น๐—ฝ๐—ถ๐—ป๐—ฒ.๐—ท๐˜€ ๐—ช๐—ฟ๐—ฎ๐—ฝ๐—ฝ๐—ฒ๐—ฟ The native <dialog> element gives you focus handling, Esc and backdrop. Here's a reusable Blade + Alpine modal built on top of it. sagarpansuriya.in/blog/nativโ€ฆ

Accessible Modals with Native and a Tiny Alpine.js Wrapper

Stop hand-rolling focus traps. The native element gives you focus handling, Esc and a backdrop for free. Here's a reusable Blade + Alpine modal built on top of it.

sagarpansuriya.in
1
13
Sagar Patel retweeted
Sagar Patel@frontendbysagarOct 2
Frontend Code Reviews That Actually Make Your Team Better! What to look for first, how to label comments, what to hand over to Prettier, ESLint, Stylelint and Pint, and how to review CSS and UI changes. Plus a copy-paste PR checklist for front-end teams. sagarpansuriya.in/blog/frontโ€ฆ

Frontend Code Reviews That Actually Make Your Team Better

What to look for first, how to label comments, what to hand over to Prettier, ESLint, Stylelint and Pint, and how to review CSS and UI changes. Plus a copy-paste PR checklist for frontend teams.

sagarpansuriya.in
1
1
11
Frontend Code Reviews That Actually Make Your Team Better! What to look for first, how to label comments, what to hand over to Prettier, ESLint, Stylelint and Pint, and how to review CSS and UI changes. Plus a copy-paste PR checklist for front-end teams. sagarpansuriya.in/blog/frontโ€ฆ

Frontend Code Reviews That Actually Make Your Team Better

What to look for first, how to label comments, what to hand over to Prettier, ESLint, Stylelint and Pint, and how to review CSS and UI changes. Plus a copy-paste PR checklist for frontend teams.

sagarpansuriya.in
1
1
11
Livewire or Inertia with React or Vue? A practical framework for Laravel tech leads: team skills, interactivity, SEO, offline, hiring, testing and maintenance, with a scoring matrix and three scenarios. sagarpansuriya.in/blog/livewโ€ฆ

Livewire vs Inertia: A Tech Lead's Decision Framework

Livewire or Inertia with React or Vue? A practical framework for Laravel tech leads: team skills, interactivity, SEO, offline, hiring, testing and maintenance, with a scoring matrix and three...

sagarpansuriya.in
1
1
38
๐——๐—ฒ๐˜€๐—ถ๐—ด๐—ป ๐—ง๐—ผ๐—ธ๐—ฒ๐—ป๐˜€ ๐—ง๐—ต๐—ฎ๐˜ ๐—ฆ๐˜‚๐—ฟ๐˜ƒ๐—ถ๐˜ƒ๐—ฒ ๐—ฎ ๐—ฅ๐—ฒ๐—ฏ๐—ฟ๐—ฎ๐—ป๐—ฑ ๐˜„๐—ถ๐˜๐—ต ๐—ง๐—ฎ๐—ถ๐—น๐˜„๐—ถ๐—ป๐—ฑ ๐—–๐—ฆ๐—ฆ ๐˜ƒ๐Ÿฐ ๐ŸŽจ A new brand color shouldnโ€™t require a massive find-and-replace across your codebase.
1
9
In this article, I cover how to structure ๐—ฝ๐—ฟ๐—ถ๐—บ๐—ถ๐˜๐—ถ๐˜ƒ๐—ฒ + ๐˜€๐—ฒ๐—บ๐—ฎ๐—ป๐˜๐—ถ๐—ฐ ๐˜๐—ผ๐—ธ๐—ฒ๐—ป๐˜€ using Tailwind CSS v4โ€™s CSS first @theme approach. Perfect for: Rebrand, Dark mode, Multiple brands, Scalable design systems
1
5
Read the full guide ๐Ÿ‘‡ ๐Ÿ”— sagarpansuriya.in/blog/tailwโ€ฆ

Design Tokens That Survive a Rebrand with Tailwind CSS v4

How to structure primitive and semantic tokens with Tailwind CSS v4's CSS-first @theme so a new brand colour, dark mode or a second brand is an afternoon of work, not a find-and-replace.

sagarpansuriya.in
3
Interaction to Next Paint is the Core Web Vital most Laravel apps quietly fail. Here's how to measure INP in Blade, Livewire and Alpine apps, and the fixes that actually move the number. sagarpansuriya.in/blog/inp-cโ€ฆ

INP for Laravel Apps: Fixing Slow Interactions Before Users Notice

Interaction to Next Paint is the Core Web Vital most Laravel apps quietly fail. Here's how to measure INP in Blade, Livewire and Alpine apps, and the fixes that actually move the number.

sagarpansuriya.in
2
29
Load more