هل تمنيت يومًا أن يكون هناك تطبيق أو ملحق ويب يتيح لك إنشاء نماذج أولية لواجهة المستخدم ومشاركتها على الفور؟
كلنا نفعل! لدينا جميعًا أفكار حول الكيفية التي نريد أن تظهر بها مواقعنا أو تطبيقاتنا وتشعر بها.
إذن ، لقد توصلت إلى تصميم رائع حقًا ولا يمكنك أن تتذكر بالضبط كيف فعلت ذلك؟
الآن عليك أن تجد طريقة لمشاركتها. قد يستغرق هذا أيامًا ، أو حتى أسابيع ، إذا كنت تحاول مشاركة تصميم معقد جدًا.
ليس هناك سبب للانتظار لإنشاء نماذج أولية لتطبيق الويب الخاص بك. قم بإنشائها الآن باستخدام Dabblet.
قم بسحب وإفلات العناصر والنمط وحفظها. أرسله إلى مصمم لمراجعته أو ببساطة انسخه في عرض تقديمي. الاحتمالات لا حصر لها.
ما هو Dabblet؟
باستخدام dabblet، يمكنك تجربة مقتطفات صغيرة من كود CSS و HTML في الوقت الفعلي.
لن تحتاج إلى أي بادئات في كود CSS الخاص بك عند استخدام هذا. تسمح لك قواعد GitHub بتخزين المحتوى الخاص بك ونشره على مواقع أخرى ومشاركته مع الآخرين.
هذه طريقة رائعة لمشاركة مقتطفات التعليمات البرمجية مع مطورين آخرين والحصول على تعليقات.
كيف تعمل؟
بمجرد كتابة الرمز ، يكون الإخراج المرئي مرئيًا على الفور فوقه. جافا سكريبت هو الإعفاء الوحيد ، مع الأخذ في الاعتبار أنه سيكون من المزعج تشغيله عند كل ضغطة مفتاح وقد يتسبب في جعل المتصفح غير قابل للاستخدام في مواقف معينة.
سيؤدي استخدام الخيار "Run JS" في علامة تبويب JavaScript أو اختصار لوحة المفاتيح (Ctrl + Enter أو Cmd + Enter) إلى تشغيل JavaScript عند تشغيل Dabblet. تتيح لك قائمة الخيارات تغيير هذا النمط.
بصفتك مطورًا ، يمكنك التبديل بين الترميز بجميع هذه اللغات الثلاث في وقت واحد أو مشاهدة المنتج النهائي.
المميزات
فيما يلي ميزات Dabblet التي يجب أن تعرفها:
تحرير CSS السريع: يمكنك إضافة خصائص CSS وتحريرها وإزالتها بسرعة. ستنعكس التغييرات على الصفحة في الوقت الفعلي.
تسليط الضوء على تركيب: يتم تمييز كود CSS و HTML ، مما يسهل قراءته وفهمه. سيتم أيضًا التحقق من صحة الرمز أثناء الكتابة. يمكنك أيضًا اختيار إخفاء مربع الشفرة إذا كنت تفضل ذلك.
الإكمال التلقائي: يوفر Dabblet الإكمال التلقائي لخصائص وقيم CSS. يمكن أن يكون هذا مفيدًا جدًا عند إنشاء أوراق الأنماط أو تحريرها.
أوراق أنماط CSS مسبقة الصنع: يمكنك الوصول إلى أوراق أنماط CSS سابقة الإنشاء من مواقع الويب الشهيرة. يمكن استخدام هذه لإضافة الأنماط بسرعة وسهولة إلى موقع الويب الخاص بك.
دعم Gist: يدعم Dabblet GitHub Gists ، مما يسمح لك بتخزين ومشاركة مقتطفات التعليمات البرمجية الخاصة بك مع الآخرين بسهولة.
المعاينة المباشرة: يمكنك رؤية نتائج التغييرات في التعليمات البرمجية الخاصة بك في الوقت الفعلي دون إعادة تحميل الصفحة. على سبيل المثال ، إذا قمت بتغيير لون النص ، فسترى التغيير ينعكس على النص أثناء الكتابة.
اختصارات لوحة المفاتيح: يحتوي Dabblet على اختصارات لوحة مفاتيح للمهام الشائعة ، مثل إضافة قاعدة نمط جديدة أو التعليق.
أوضاع عرض متعددة: يوفر Dabblet أوضاع عرض متعددة ، مما يتيح لك رؤية الشفرة والنتائج جنبًا إلى جنب أو فوق وتحت بعضها البعض.
الايجابيات
- سريع CSS
- حتى إذا قمت بتسجيل الدخول ، فلا يزال بإمكانك حفظ وضع التصفح المتخفي.
- عارضات قيمة CSS المضمنة للعديد من المعلمات مثل الزوايا والألوان والمدة وما إلى ذلك.
- كل شيء محرّر بـ XHR ، لذلك لا يتم تحديث الصفحة أبدًا ، ولا حتى عند الحفظ.
- اختصارات لوحة المفاتيح وفيرة.
- يتم تنسيق جميع الكود تلقائيًا (باستثناء تخفيض السعر).
- وثائق قوية من البداية.
سلبيات
- الواجهة محيرة قليلاً في البداية ، لكنك تعتاد عليها.
- لا توجد ميزات إدارة على مستوى المشروع (حتى الآن).
تكاملات Dabblet
يجب أن تتكامل أي منصة مع خدمات أخرى ، ولا يُعد Dabblet استثناءً. فيما يلي بعض عمليات الدمج التي يقدمها Dabblet:
Google Analytics
يمكنك بسهولة إضافة شفرة تتبع Google Analytics إلى صفحات Dabblet. سيسمح لك هذا بتتبع مشاهدات الصفحة والإحصائيات الأخرى الخاصة بـ Dabblet.
أوبونتو
يمكن استخدام Dabblet لإنشاء سمات Ubuntu. يمكنك إنشاء Dabblet جديد وإضافة كود CSS و HTML ومعاينة النسق في مستعرض ويب.
DigitalOcean
توفر شركة استضافة سحابية فريدة من نوعها خدمات الحوسبة السحابية للشركات ، مما يسمح لهم بتنمية عملياتهم بشكل أكثر كفاءة.
ماذا يفعل Dabblet به؟
يمكنك الآن إنشاء Dabblets وإدارتها ونشرها على مساحات DigitalOcean.
يتيح لك ذلك الاحتفاظ بجميع مقتطفات التعليمات البرمجية الخاصة بك في مكان واحد ويسهل مشاركتها مع الآخرين.
بدائل لـ Dabblets
البدائل موجودة دائمًا ، وعلى نفس المنوال ، إليك عدد قليل من الأشخاص للتفكير مليًا عندما يتعلق الأمر بـ Dabblet:
pastebin.com
يستخدم المبرمجون موقع الويب بشكل عام لحفظ شفرة المصدر أو أجزاء بيانات التكوين. ومع ذلك ، يمكن لأي شخص وضع أي نص في المساحة المتوفرة.
شبيبة بن
JS Bin هي أداة اختبار مجانية لـ JavaScript. يمكن مشاركة النتيجة من خلال عنوان URL قصير بمجرد إدخال Javascript في جزء واحد و HTML في الجزء الآخر. استفد من القائمة التي تتيح لك الاختيار من بين بعض مكتبات JS الأكثر استخدامًا.
CssDeck
هذه الأداة رائعة لإنشاء حالات الاختبار وتبادلها مع الآخرين الذين يمكنهم مساعدتك في مساعيك في الترميز. مع خيارات متنوعة ، يمكنك حتى التعاون في المشاريع على الفور مع مبرمجين آخرين.
الغطاس
Plunker عبارة عن منصة رقمية حيث يمكن لمطوري الويب تبادل الأفكار والتعاون ومشاركة أفكارهم.
على سبيل المثال ، يمكنك البدء بكلمة "مرحبًا ، أيها العالم!" برنامج بأي لغة وأضف مقتطفات من التعليمات البرمجية وعلامات تخفيض السعر ولقطات الشاشة لإنشاء تجربة تعليمية ثرية.
كلمة أخيرة
في الختام ، Dabblet هي أداة مفيدة لمطوري الويب ، وخاصة أولئك الذين يبحثون عن طرق بسرعة وسهولة اختبار التعليمات البرمجية الخاصة بهم.
مع ميزاتها وتكاملها المختلفة ، من الصعب عدم العثور على استخدام لهذه المنصة.
محاولة إعطائها اليوم!
اترك تعليق