في هذا المقال جمعت لكم أفضل 21 إضافة مجانية مبنية بلغة جافا سكريبت (JavaScript plugins)، لتستخدمها في مشروعك القادم أو الحالي أيضا!
جميعنا يعرف لكي تكون مطورًا ويب لا يعني فقط إنتاج تطبيقات ومواقع جيدة، بل يتطلب منك متابعة التغييرات والتطورات في هذا المجال.
إن مواكبة العالم التقني المتغير باستمرار هو مفتاح للنجاح.
ولكن هذا لا يعني أنه يجب عليك المشاركة في كل مؤتمر واجتماع وحدث وكذلك العمل على جميع التقنيات الجديدة في آن واحد. سواء كان ذلك مجرد مفهوم جديد في Codepen أو فرع(fork) في GitHub، فمثلا مجتمع Dev يأتي ببعض الأفكار المثيرة للاهتمام كل يوم تقريبًا.
يعج الويب بمثل هذا النوع من الأشياء. تنبثق هنا وهناك إلى حد كبير في كل مكان. المولدات (Generators)، المنصات على الإنترنت (online platforms)، إلخ. فقد تم إنشاء جميع هذه البرامج للمساهمة في سير عمل المشاريع والمنتجات. ولكن عندما يتعلق الأمر بإنشاء موقع ويب، فنحن نحب المكونات الإضافية لجافا سكريبت (JavaScript plugins) التي تقدم لنا إجابات سريعة عن مشاكلنا، وتقدم حلول لمعالجتها بفعالية أكبر. وفي هذا المقال سأذكر 21 إضافة مبنية بلغة جافا سكريبت (JavaScript):
- Moon.js
- Tippy.js
- Modaal
- Datedropper
- Canvi
- Billboard.js
- Markvis
- Fitty
- MediumLightbox
- StickyBits
- Sticky Sidebar
- Micron
- AnimatePlus
- Moving Letters
- Blotter.js
- PixelWave
- Bubbly Bg
- CSS Doodle
- Draggable
- Pts.js
- Emergence.js
هلا بدأنا! لا تنسى أن تقوم بحفظ هذه المقالة في مفضلتك.
على سبيل المثال، Moon.js هذه المكتبة الصغيرة، التي تزن النسخة المصغرة منها 7 كيلوبايت فقط، تم تصميمها خصيصًا لنماذج الواجهة الأولية. تشبه هذه الإضافة إلى حد كبير Vue أو React فهي لديها نظام يتيح لك بناء واجهات مستخدم (UIs) في فترة قصيرة من الزمن.
إضافة Tippy.js تهدف إلى تحسين الجانب المعلوماتي للمشروع من خلال تزويد القراء بدلالات غير مزعجة. فعملها هو إنشاء وإضافة التلميحات (tooltips). خيارات التخصيص واسعة جدًا – يمكنك تحديد الموضع، الأسهم (arrows)، المشغلات (triggers)، الصور المتحركة (animations) وحتى السمات.
إذا كنت بحاجة إلى أكثر من مجرد تلميح صغير، فيمكنك استخدام النوافذ المنبثقة حيث يمكنك وضع عروض خاصة أو بيانات إضافية. في هذه الحالة يجب أن تكون إضافة Modaal اختيارك. إنها مزيج مدروس من الجودة والمرونة وسهولة الوصول. وهي تنطبق على أي نوع من أنواع المحتوى، بما في ذلك الصور ومقاطع الفيديو والمعارض.
أو ربما تبحث عن منتقي تاريخ جميل ومتعدد الوظائف لمشروعك، فيجب عليك أن تفكر في إضافة Datedropper.
على الرغم من أنه تم إنشاؤه في عام 2015، إلا أن قد شهد العديد من التحسينات والتطويرات. تقريبا أي جانب من جوانب الواجهة يمكن إنجازه بمساعدة الإضافات. ما إذا كان هو نظام أشرطة القوائم المنزلقة (slide-out navigation) الذي يمكن إعادة إنشائه بسهولة بمساعدة Canvi أو مجموعة من المخططات الرائعة التي يمكن بناؤها عبر Billboard.js أو Markvis، والتي تغطي جميع الأدوات اللازمة لذلك، فالحلول الجاهزة ترفع عنك الحمل الثقيل وأيضا مجال استخدامها واسع جداً.
محطاتنا التالية هي Fitty و MediumLightbox.
هو الحل لإجبار النص على احتواء حاوية محددة (specified container).
في حين أن MediumLightbox هو البديل الخفيف الوزن للصندوق الضوئي الشهير (lightbox) فهو يمنحك طريقة بسيطة وأنيقة لإضافة وظيفة التكبير للصور.
ضع في اعتبارك واحدة من الميزات الأكثر شيوعًا للواجهات الحديثة – اللوحات اللزجة. يستخدم كل موقع آخر تقريبًا المواقع الثابتة لتزويد الزائرين بطريقة إضافية للتنقل: يمكن أن يكون زر “انتقال إلى أعلى” أو القائمة الرئيسية. إذا كنت بحاجة إلى شيء من هذا القبيل في مشروعك، يمكنك الذهاب إلى StickyBits أو Sticky Sidebar.
توفر هذه المكونات الإضافية لجافا سكريبت طريقة سهلة لإنشاء المكونات اللزجة او الملتصقة. الخيار الأول ( StickyBits) رائع لإنشاء القوائم الأفقي الملتصقة (تماماً مثل القائمة الرئيسية في هذا الموقع)، بينما يكون الخيار الثاني (Sticky Sidebar) الخيار الأفضل للقوائم الجانبية اللاصقة.
لنقم بإضافة بعض المرح! [icon color=”Accent-Color” animation_speed=”Slow” size=”regular” icon_size=”” animation_delay=”” image=”iconsmind-Friendster“]
بالرغم من أهمية الجزء العملي والبرمجي من الواجهة إلا أنه لا يكفي، بسبب أن تطبيقات الويب المعاصرة تتطلب نوعًا من عوامل الترفيه. يحتاج التصميم إلى شيء من شأنه إثراء تجربة المستخدم وجعل استكشاف المشروع ممتعًا. الاختيار الأول والأكثر شعبية هو بالتأكيد التفاعلات الخفيفة أو الدقيقة (Micro-interactions) (والتي سبق وكتبت مقالاً عنها: ماهي التفاعلات الخفيفة (Micro-interactions)؟ وتأثيرها على تجربة المستخدم UX؟ ) التي تعمل على تحسين تجربة المستخدم من زوايا مختلفة. هنا نوصي أن نأخذ في الاعتبار Micron و AnimatePlus.
ميكرون Micron هو بالضبط لمثل هذه الأشياء. تتضمن مكتبة JavaScript هذه مجموعة من التفاعلات الخفيفة التي يمكن إضافتها بسهولة إلى عناصر DOM باستخدام سمات خاصة.
هي مكتبة خفيفة الوزن لتهيئة عناصر HTML أو SVG. ويمكنك التحكم في التسهيل والمدة والتأخير والاتجاه والحلقة والسرعة والمزيد من العوامل. أما إذا كنت تريد فقط إثراء واجهة المستخدم من خلال بعض المميزات الجمالية المبهجة، فعليك محاولة إضافة هذه الإضافات: Moving Letters, PixelWave, Blotter.js و Bubbly Bg. هذه الحلول الأربعة ستعطي الواجهة لمسة نهائية رائعة.
وهي عبارة عن مجموعة صغيرة تم إنشاؤها من قبل توبياس أهلين Tobias Ahlin الموهوب الذي طور طرقًا مختلفة لإضفاء الحياة على مواقع الويب. ويصاحب كل تأثير شفرة يمكنك تهيئتها بسهولة مع مشروعك.
يشبه إلى حد كبير المثال السابق، Blotter.js هو أيضا لخلق تأثيرات النص مع سحر مميز.
هو لإنشاء الانتقالات بين الصفحات أو الشرائح مع تأثير هندسي دقيق ولطيف.
هو لإنشاء لوحة فنية مع الرسوم المتحركة (animation) اللطيفة التي تشغل إطار العرض بالكامل. الآثار السابقة لطيفة وجميلة، لكنها صغيرة وقصيرة. فإذا كنت تبحث عن المزيد من الطرق الباذخة والموسعة لإثارة إعجاب الزوار، يمكنك وضع عينيك على CSS Doodle, Draggable و Pts.js.تأتي هذه الإضافات من فئات مختلفة وتفعل أشياء مختلفة تمامًا، لكن لديهم شيء واحد مشترك – فهم قادرون على إعطاء واجهات منتجك عامل مدهش ومبهر.
هو مكون ويب يسمح لك برسم أنماط برمجية باستخدام تقنية CSS.
هي مكتبة خفيفة الوزن لإضافة وظيفة السحب والإفلات إلى مشروعك. وقد تم إعدادها لتكون سهلة الوصول، يمكن فرزها، قابلة للتبديل وقابلة للتوسع.
في Pts.js نقطة هي لَبِنَة أساسية تقوم بالاتصال مع بقية النقاط من أجل إنشاء مجموعة من النقاط. بإمكانك استخدامها لبناء جسيمات ومجموعات رائعة وفريدة من نوعها.
وآخر إضافة هي Emergence.js. على عكس الإضافات السابقة التي تُعد حلول جاهزة تفرض عليك قواعدها جزئياً، تعتبر Emergence.js أداة مرنة توفر فقط أساساً صلباً للتجارب. هدفه هو الكشف وتوضيح بعض العناصر في المتصفح مما يمنحك حرية التلاعب.
الخلاصة
تشبه مكونات وإضافات جافا سكريبت المساعدين الشخصيين. بالتأكيد كل شيء تقوم به هذه الإضافات يمكن أن يقوم بها المطور بنفسه؛ ولكن لماذا تفعل ذلك عندما يكون لديك أشياء أكثر أهمية لتقوم بها؟ استخدم الإضافات من أجل قضاء وقتك في أشياء أكثر أهمية أو متعة! وأيضا لزيادة إنتاجيتك وزيادة مهاراتك. شاركوني تعليقاتكم والإضافات التي تقومون باستخدامها.
ما شاء الله..برغم اني ليس لي باع في التكنولوجيا الى هذه الدرجة..لكن يسعدني ان اصمم موقعا من خلال مساعداتك..فقد كانت تلك أمنية لي لكن طبعا المؤهلات محدودة جدا..يسرني متابعتك يا لينا..وارجو لك مزيدا من التفوق والنجاح ..♡
شكراً لك يا صفاء على كلماتك المحفزة والتشجيعية
اكيد يشرفني العمل العمل معك وتحقيق امنيتك 💜