استكشف أفكارك دون أن تفقد موضعك أبدًا
خريطة ذهنية على شكل كوكب صغير: عند فتح ملاحظة تظهر ملاحظاتها الفرعية حولها، بينما تبقى الصورة الكاملة أمام عينيك.
الحاجة
في معظم أدوات الخرائط الذهنية، يؤدي فتح فرع إلى ازدحام الشاشة أو الانتقال إلى صفحة جديدة، فتفقد أثر المكان الذي جئت منه.
الفكرة
الإبقاء على شجرة الأفكار المعتادة كما هي تمامًا، وتغيير طريقة التنقل فيها فقط.
ما الذي بنيته
- تنقّل تظهر فيه الملاحظات الفرعية لكل ملاحظة على كرة صغيرة من حولها، بينما يبقى المستوى الأعلى على الشاشة.
- إيماءات اختيرت من أجل الراحة: عجلة الفأرة للتكبير، والسحب للتدوير، وAlt مع السحب لتحريك العرض، ومناطق لمس أكبر على الهاتف.
- نسختان سابقتان — رسم مسطّح، ثم نسخة ثلاثية الأبعاد تغيّر المشهد مع كل نقرة — استُبدلتا لأنهما كانتا تُفقدان الناس اتجاههم.
- كما تعرض تلقائيًا مشاريع هذا الموقع، عبر تدفق بيانات عام صغير.
النتيجة
- 3تصاميم تنقّل جُرّبت، واعتُمد واحد
- 22محاولة للالتفاف على حماية التحرير، صُدّت كلها
- 2اعتمادية برمجية للمشروع كله
- 5 سبتمبر 2026تاريخ الإطلاق
الخريطة العامة عرض عملي حيّ لطريقة التنقل. ولا تصل التعديلات إلى بيئة الإنتاج إلا بعد نجاح الاختبارات الآلية.
بالصور
ما الذي تعلّمته
بالكاد تغيّرت البيانات عبر ثلاث نسخ؛ ما تغيّر هو طريقة التنقل فيها فقط. والفصل بين الأمرين سمح لي بإعادة بناء العرض مرتين دون المساس بالبيانات.
التفاصيل التقنية التقنيات والبنية والقرارات، للقرّاء التقنيين
التقنيات المستخدمة
- Three.js
- JavaScript خالص
- Node.js + Express
- SQLite (node:sqlite)
- Cloudflare Tunnel + Access
- systemd
- GitHub Actions
كيف يعمل
- جدول تكراري واحد notes(id, parent_id, x, y, title, content)، حيث تمثّل x وy خط طول وخط عرض بالدرجات على كرة الملاحظة الأم.
- Three.js هي المكتبة الوحيدة التي يحمّلها المتصفح؛ ونحو 760 سطرًا من JavaScript المكتوب يدويًا تتولى التخطيط والتنقل والتحرير. وتتحكم الكاميرا مباشرة في الإحداثيات الكروية بدل OrbitControls.
- نصف قطر كل كرة فرعية يساوي 0.46 من نصف قطر الكرة الأم؛ ولا يُعاد بناء رسم المشهد أبدًا أثناء التنقل.
- القراءة عامة؛ أما الكتابة فمحمية مسبقًا بـ Cloudflare Access، ولا تستمع الخدمة إلا على 127.0.0.1 خلف نفق. وانتهت 22 محاولة التفاف (تغيير حالة الأحرف، وشرطات مائلة مزدوجة، ومقاطع «..»، وترميز عناوين URL، وطرق HTTP أخرى) كلها في صفحة تسجيل الدخول.
- كشفت مراجعة بعقلية المهاجم خللين حقيقيين صُحّحا في اليوم نفسه: محلّل JSON مركّب على كل المسارات كان يسمح لزائر مجهول بالكتابة في سجل النظام، وفشل تحميل شبكي واحد كان يجمّد التنقل.
- نشر مستمر عبر GitHub Actions؛ ولا تتقدّم بيئة الإنتاج إلا إذا نجحت مجموعة الاختبارات.
المشكلات وحلولها
- على الهاتف، كانت النقرات على علامات الملاحظات الصغيرة (6–10 px) تخطئ هدفها كثيرًا: هامش لمس قدره 22 px والتحميل المسبق للمستوى التالي رفعا النقرات المحاكاة الناجحة من 12/17 إلى 17/17.
- كان تأثير التوهّج (bloom) عنق الزجاجة على الهاتف: إيقافه على هذه الأجهزة رفع سرعة عرض رحلة عبر عدة مستويات من 20 إلى 37 إطارًا في الثانية.
ما لا يزال ناقصًا
- التحرير مقصور عليّ، عن قصد
- إيماءات اللمس ما زالت قيد التحسين