نصائح mostafa mohamed abdalla

ليه بنحس إن تطبيقات زي Stripe و Apple و Linear منتجات بملايين الدولارات، بينما أغلب تطبيقات الSaaS والEnterprise بتبان عادية؟

خلال شغلي السنين اللي فاتت على أنظمة ضخمة، ك Senior software engineer كنت دايماً مهتم جدا بتجربة المستخدم (UX). بنهتم بالألوان والأنيميشن والتصميم، لكن دايماً كان فيه حلقة مفقودة.

المستخدم لما يعمل اي action زي انه يضغط save , or delete أو ينفذ عملية دفع، بيضطر يفضل باصص ومستني التنبيه يظهر. في حين إن المنتجات العالمية بتعتمد على Multi-Sensory Feedback — نغمة رنين خفيفة جداً بتأكد لك النجاح في أجزاء من الثانية.

بس المشكلة: ليه أغلبنا Developers بنتجنب إضافة أصوات؟ عشان صداع ملفات MP3، وحجم التحميل، وبطء استجابة الشبكة (Latency)، ومشاكل SSR في Next.js.


عشان كده قررت أحل الموضوع ده ونشرت مكتبة مفتوحة المصدر بالكامل: Tonely شغال عليها بقالي فتره ولاكن جه الوقت تطلع للنور.. إيه فكرتها؟

Zero Audio Files: مفيش ولا ملف صوتي واحد! كل النغمات بتتولد برمجياً ولحظياً داخل المتصفح (Web Audio API).
سرعة فائقة (Zero Latency): الصوت بينطلق في أقل من 1ms بدون أي Network Requests.
حجم لا يذكر: حجم الحزمة بالكامل أقل من 1.5 KB — أصغر من أيقونة SVG عادية!


جاهزة لModern Web: متوافقة 100% مع Next.js (SSR-safe) و React و Vue وأي إطار عمل، مع نغمات جاهزة ومدروسة لحالات Success وError والتفاعلات اليومية.

لو أنت Frontend أو Full-Stack Developer، أكيد اتكرر معاك السيناريو ده: مستخدم بيرفع صورة من الموبايل تتفاجئ إن حجمها طالع 18MB أو 25MB!

المطورين عادة بيحلوا المشكلة دي بطريقتين: 1️⃣ تحديد حجم upload بـ Validation: وترفض الصورة لو أكبر من 2MB، بس هل المستخدم العادي هيعرف يضغط الصورة بنفسه؟ 2️⃣ الضغط على السيرفر: ترسل الصورة الخام للـ Backend أو تشترك في خدمات زي Cloudinary أو AWS Lambda، وهُنا بتدفع تكلفة وسيرفر أعلى.

طب إيه الحل؟ 💡 بعد ما واجهت المشكلة دي كتير، قررت أطلق مكتبة مفتوحة المصدر جديدة: compressly

ليه تجرّب compressly؟ حجم أقل من 3KB (أخف بـ 95% من المكتبات القديمة زي browser-image-compression). ⚙️ Web Worker مدمج: المعالجة بتتم في الـ Background بدون أي Freeze لـ UI حتّى على الموبايلات الضعيفة. حل اتجاه صور الآيفون (Auto EXIF): معالجة createImageBitmap تضمن إن صورة الـ Portrait متتقلبش بالعرض. 🎯 Adaptive Target Size: بتحدد الحجم المطلوب (مثلاً 0.5MB) وهي بتعدّل الجودة والأبعاد للوصول للهدف. 🚀 دعم Batch: رفع وجدولة عدة صور بالتوازي بدون استهلاك زائد للذاكرة. ⚛️ جاهزة لـ React & Next.js: تدعم SSR ومزودة بـ Custom Hook جاهز.