طماطة واقعية مكتوبة بالكود
بلا موديل جاهز: الثمرة وأوراقها وعنقها تُولَّد بالكود، والقشرة مخبوزة في 111KB، والأشكال تُبنى وقت فراغ المتصفح فلا يتقطع شيء.
نبنيه كما يُبنى المنتج.
خلف كل كادر في هذا الموقع هندسة يمكنك فحصها: سرعة مقاسة، ومشاهد ثلاثية الأبعاد تعمل لحظيًا، ولغتان من مصدر واحد، ونظام استوديو ينشر في ثوانٍ. هكذا صُنع، والأرقام تُقاس الآن على جهازك.
شاهد كل مشهد كهيكل سلكي مع التقنية خلف كل قسم. أو اضغط X في أي صفحة.
مباشرة، على جهازك
تُقرأ من واجهات الأداء في متصفحك أثناء عمل هذه الصفحة. لا شيء هنا مكتوب يدويًا.
- تحميل الصفحة
- —
- أكبر رسم
- —
- إزاحة التصميم
- —
- معدل الإطارات
- —
- عبر الشبكة
- —
- الطلبات
- —
مُقاسة على زوار حقيقيين
القيمة التي يحققها 75٪ من الزيارات خلال آخر أربعة أسابيع، من هواتف الزوار وحواسيبهم أنفسهم: المقياس الذي تعتمده Google لمؤشرات الويب الأساسية. تُجمع أزمنة مجهولة الهوية فقط.
| الجهاز | LCPالتحميل | INPالاستجابة | CLSالثبات | TTFBالخادم |
|---|---|---|---|---|
| الهواتف | — | — | — | — |
| الحواسيب | — | — | — | — |
جارٍ الجمع: تظهر الأرقام بعد قياس عدد كافٍ من الزيارات.
ميزانيات الأداء
ما يحق لأي صفحة في هذا الموقع أن تكلفه عند أول تحميل. اختباراتنا الآلية تُلزم كل صفحة بهذه الحدود مع كل بناء، فالصفحة التي تتجاوزها لا تُنشر. الأشرطة تقيس هذه الصفحة الآن.
- HTML — من 20 KB تجاوز الميزانية
- CSS — من 36 KB تجاوز الميزانية
- JavaScript — من 420 KB تجاوز الميزانية
- الخطوط — من 50 KB تجاوز الميزانية
الأحجام بالبايتات المضغوطة عبر الشبكة. في الزيارة التالية يأتي معظمها من ذاكرة متصفحك، فتقصر الأشرطة.
من داخل هذا الموقع
ست مسائل حللناها هنا، وكل واحدة تراها تعمل.
رائد فضاء يتكلم بيديه
هيكل من 90 مفصلًا تحركه نوابض، وإيماءات على إيقاع الصوت، وتوهج محمي من البكسل الواحد الذي قد يطفئ إطارًا كاملًا.
أخف بنسبة 39% دون تغيير بكسل واحد
أزلنا خامتين لم يستخدمهما المشهد قط، وتُضغط الموديلات والخطوط أثناء النقل، وتصل أنماط كل صفحة في ملف واحد مخزّن.
واجهة تُرسم خارج الخيط الرئيسي
يُرسم جهاز العرض داخل Web Worker على OffscreenCanvas، فلا ينتظر التمرير أو القراءة معالج الرسوم أبدًا.
شاهده مباشرةمصدر واحد بلغتين
كل صفحة تتحدث العربية والإنجليزية، من اليمين لليسار ومن اليسار لليمين، من الشيفرة نفسها، بما فيها التصميم والحركة والمشاهد ثلاثية الأبعاد.
شاهده مباشرةنظام استوديو ينشر في ثوانٍ
الأعمال والملاحظات والطلبات والوسائط في لوحة تحكم خاصة بنا، والنشر يعيد بناء الصفحات بالمسار نفسه الذي يُبنى به الموقع.
ملاحظات المختبرالأدوات التي نبني بها
أدوات مفتوحة ومجرّبة، نختارها لما يحتاجه كل مشروع لا بحكم العادة.
- Three.js
- WebGL 2
- WebGPU
- GLSL
- GSAP
- Lenis
- React
- Node.js
- esbuild
- sharp
- Playwright
- glTF · meshopt · Draco
- Service Worker
- Brotli
معاييرنا
المعايير نفسها التي بُني بها هذا الموقع، نطبقها على كل مشروع.
ميزانيات الأداء
حدود لما تكلفه كل صفحة، تُفحص مع كل بناء وتُقاس على الهواتف.
سهولة الوصول من البداية
تنقل بلوحة المفاتيح، وتباين مقروء، واحترام تقليل الحركة، وأوصاف حقيقية لقارئات الشاشة.
العربية والإنجليزية على قدم المساواة
الاتجاه من اليمين لليسار مصمَّم لا معكوس: الخط والأرقام والحركة تُراجع في اللغتين.
الأمان افتراضيًا
سياسة محتوى صارمة، وكلمات مرور مشفرة، وحماية CSRF، وحدود للطلبات، وتحقق من كل مدخل.
مُختبر قبل النشر
اختبارات آلية وفحوص في متصفحات حقيقية مع كل تعديل، لا قبل الإطلاق فقط.
رعاية بعد الإطلاق
تقارير أخطاء، ونسخ احتياطية يومية، وصفحة صحة تحافظ على الموقع بعد الإطلاق.
كيف يجري المشروع
- 01
نكتشف
الأهداف والجمهور والقيود، وكيف سنقيس النجاح.
- 02
نختبر الفكرة
الجزء الأصعب أولًا، يعمل في المتصفح، قبل أي تلميع.
- 03
نبني
التصميم والهندسة في حلقة واحدة، وباللغتين من اليوم الأول.
- 04
نُثبت
ميزانيات واختبارات وفحص على الأجهزة، والأرقام نشاركها معك.
- 05
نطلق
إطلاق هادئ والمراقبة تعمل من الدقيقة الأولى.
- 06
نرعى
تحديثات ونسخ احتياطي وتحسينات كلما كبر جمهورك.