All articles
Prevent Button Shrink on Load - A Better UI Pattern with Tailwind CSS
5 Jul 2025 • 8 mins read
When creating loading buttons in React, the common approach of swapping text with a loader using conditional rendering often causes unwanted layout shifts. This article introduces a cleaner solution: layering both the loader and the text using CSS grid and toggling their visibility instead of replacing them. This method ensures the button retains its size, resulting in a smoother, more polished UI—especially when using Tailwind CSS.
Next.js 14+ Strategic Client Component Usage
4 Jul 2025 • 5 mins read
In Next.js 14+, avoid turning entire forms into client components just to add interactivity. Instead, keep forms server-side for better performance and use small client components -like a submit button with useFormStatus()- only where needed. This approach improves SEO, scalability, and maintainability.
تفعيل الوضع الداكن بالطريقة الصحيحة – من الخادم وليس المتصفح
2 جويلية 2025 • 6 دقائق قراءة
يتناول هذا المقال مشكلة شائعة في تطبيقات الوضع الداكن (Dark Mode) على الويب تُعرف باسم FOUC (Flash of Unstyled Content)، والتي تحدث بسبب تأخر تطبيق السمة الصحيحة عند تحميل الصفحة. معظم المطورين يعتمدون على JavaScript وlocalStorage لتحديد السمة بعد تحميل الصفحة، مما يؤدي إلى وميض أبيض مزعج عند التنقل.
معمارية تعدد المستأجرين (Multi-tenant architecture)
30 جوان 2025 • 12 دقيقة قراءة
هذا المقال يشرح مفهوم معمارية تعدد المستأجرين (Multi-tenant architecture)، وهي طريقة تُمكّن تطبيقًا واحدًا من خدمة عدة عملاء في نفس الوقت باستخدام نفس الكود والبنية التحتية، مع الحفاظ على فصل كامل بين بيانات وتجربة كل عميل. للتوضيح العملي، تم بناء مثال بسيط باستخدام Cloudflare Workers، يُحدد هوية المستأجر من النطاق الفرعي في عنوان URL ويعرض له صفحة مخصصة.