موارد جديدة لمصممي ومطوري الويب (يوليو 2015)

ينعم مطورو الويب بالأدوات والموارد المجانية الموجودة على الإنترنت ، والتي نقوم بتجميعها بواجب في سلسلة مواردنا الطازجة كل شهر. إذا فاتتك دفعة الشهر الماضي ، فراجعها هنا أو تحقق من باقي الموارد الجديدة التي تم تجميعها في الجزء الأول من العام.

بالنسبة إلى مجموعة تموز (يوليو) 2015 ، نحن نميز الأدوات والموارد الجديدة التي من شأنها تسهيل مهامك ، بدءًا من مكونات WordPress التي تتيح لك نشر تحديثات المكونات الإضافية بشكل خاص إلى مكتبة JavaScript لإضافة رسوم متحركة جذابة.

علاء الدين

يضيف هذا المكون الإضافي وظائف إضافية لإدارة WordPress التي تشبه OS X Spotlight. مع ذلك ، يمكنك الوصول بسرعة إلى الملفات والمجلدات في جهاز Mac. بمجرد التثبيت ، اضغط على Shift مرتين ، ثم اكتب ما تريد الوصول إليه. يجعل إدارة WordPress أكثر قابلية للوصول باستخدام لوحة المفاتيح.

SiteOrigin CSS

SiteOrigin CSS هو مكون إضافي قوي لبرنامج WordPress لتخصيص أي مظهر للسمة في الوقت الفعلي. البرنامج المساعد يضيف لوحة جديدة تحت المظهر> مخصص المغلق قائمة طعام. هنا ، يمكنك كتابة قواعد CSS مخصصة للكتابة فوق CSS للموضوع الذي تستخدمه ، أو يمكنك أيضًا استخدام لوحة GUI لإضافة قواعد CSS بشكل حدسي.

DynamicsJS

DynmaicJS هي مكتبة لتطبيق الرسوم المتحركة القائمة على الفيزياء. أنا لست خبيرا فيزيائيا ولكن الأمثلة هنا في هذه القائمة تبدو رائعة حقا. يمكنه تحريك عناصر HTML و SVG ، ويمنحك أداءً سريعًا دون أي تبعية. تم اختبار DynamicJS على Safari 7+ و Firefox 35+ و Chrome 34+ و IE10+.

وضع الطيران

سيمنع هذا المكون الإضافي العديد من طلبات HTTP WordPress الخارجية مثل Google Fonts و Gravatar و WordPress من محاولة الاتصال بمكونات الإضافات ومستودعات السمات للحصول على التحديثات. يعد البرنامج المساعد مفيدًا للتطوير المحلي لمنع حدوث الأخطاء عندما تفشل هذه المكالمات (والتي تحدث عادة عندما تتطور محليًا تحت إنترنت بطيء بشكل استثنائي).

Coverr

مجموعة من مقاطع الفيديو الرائعة لرؤوس موقعك على الويب. جميع مقاطع الفيديو مجانية ومرخصة بموجب المجال العام. لا تنس أن تحقق من “كيف تستعمل” قسم لمعرفة كيفية إضافة الفيديو إلى صفحة الويب الخاصة بك.

VibrantJS

تلتقط VibrantJS ألوانًا بارزة من صورة ما. كما أنه يعرض بعض واجهات برمجة التطبيقات التي تسمح لك بمعالجة اللون الذي تم الحصول عليه ، مثل تبديل تنسيق الألوان وتحديد التكوين المناسب للخلفية والنص. يمكنك استخدامه لتحسين واجهة موقع الويب الخاص بك عن طريق إنشاء ألوان ديناميكية ، أو استخدام اللون كصورة نائب عند عدم تحميل الصورة بالكامل ، أو إنشاء تطبيق ويب لإنشاء حامل ألوان.

GradifyCSS

تلتقط هذه المكتبة لونين بارزين وتنتج تدرج CSS من الألوان التي تم الحصول عليها. على غرار VibrantJS ، يمكنك تطبيق التدرج اللوني كعنصر نائب للصورة عندما لا يتم تحميل الصورة بالكامل ، أو كلون متراكب.

PurifyCSS

يقوم PurifyCSS بتنظيف قواعد CSS غير المستخدمة من ورقة الأنماط الخاصة بك. يمكنك استخدام هذا لتقليص حجم أوراق الأنماط من الأطر الكبيرة مثل Bootstrap و Foundation بنسبة تصل إلى 40٪. PurifyCSS متاح باعتباره البرنامج المساعد Grunt و Gulp.

العنوان رأس المال لورد

وقد قال الاسم كل شيء. سيقوم هذا البرنامج المساعد WordPress بتحويل العناوين وكذلك العناوين داخل المحتوى إلى الحروف الكبيرة المناسبة عند حفظ أو نشر المنشور والصفحة. أجد هذا المكون الإضافي مفيدًا لمواقع الويب التي تضم مؤلفين متعددين للحفاظ على التناسق لمحتوى موقع الويب الخاص بهم.

جيثب المحدث

هذا البرنامج المساعد يسمح للمستخدم تثبيت وتحديث تلقائيا الإضافات ووردبرس] استضافت في جيثب. على الرغم من الاسم ، فإن البرنامج المساعد يدعم أيضًا Bitbucket و GitLab ، بما في ذلك واحد في مستودع خاص. إنه مكون إضافي مفيد للمطورين الذين يقومون بتطوير وتوزيع المكونات الإضافية أو السمات الخاصة بهم حصريًا لعملائهم فقط.

أمثلة التعليمات البرمجية

مجموعة من أمثلة الكود من وورد موضوع فريق مراجعة. في الوقت الحالي ، يتألف المثال من رموز لإنشاء مكونات "أداة تخصيص السمة" باستخدام واجهة تخصيص التطبيق بما في ذلك إنشاء القسم والإعدادات واللوحة. المزيد من الرموز أمثلة لأفضل الممارسات المضافة في المستقبل.