موارد جديدة لمصممي ومطوري الويب (أكتوبر 2018)

على عكس أي تطوير ويب صناعي آخر يتغير على قدم وساق. هناك أدوات وأساليب وأطر جديدة يتم تطويرها كل يوم تقريبًا لتلبية احتياجاتك أحدث الاتجاهات والتقدم التكنولوجي في صناعة الويب.

حتى هنا قائمة من أحدث الأدوات والموارد بما في ذلك إطار PHP لأداء بسهولة اختبار E2E لتطبيق PHP الخاص بك, أداة لإنشاء ألوان تتوافق مع معايير W3C Accessibility وعدد قليل من ملحقات Vue.js. دعونا القفز لرؤية القائمة الكاملة.

Keyframes التطبيق

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

سيمفوني النمر

“سيمفوني النمر” هو إطار PHP مدهش من Symfony لإجراء اختبار E2E (من البداية إلى النهاية). لأنه يأتي مع المدمج في خادم الويب ويمكن الاستفادة من Chrome المثبت في جهاز الكمبيوتر الخاص بك لإجراء اختبار E2E.

علاوة على ذلك ، فهو يدعم تنفيذ جافا سكريبت ، لقطة شاشة ، برنامج سيلينيوم مخصص, متصفح Chrome وفايرفوكس كونه إطار عمل مستقل ، يمكنك تضمين Panther في أي مشاريع PHP ، على سبيل المثال ، WordPress ، Joomla ، إلخ..

TrendyPalettes

مجموعة من لوحات الألوان الجميلة. جمع يوفر الآلاف من لوحات الألوان اختارهم. يمكن للمستخدمين إرسال لوحة ألوان جديدة ، لذلك ستكون هناك دائمًا لوحات جديدة تُضاف يوميًا. TrendyPalettes متاح أيضًا كملحق في Chrome.

Eagle.js

Eagle.js هو إطار عمل لإنشاء شرائح مبنية على أعلى Vue.js حتى تتمكن من إعادة استخدام مكونات Vue.js المخصصة بسهولة داخل الشرائح. الشريحة تدعم أيضا لوحة المفاتيح والماوس الملاحة ، التصميم المخصص أو theming, عناصر واجهة تعامل تفاعلية ، وتوفر لوحة نحاسية للمساعدة في إعداد الشريحة وعرضها بسرعة. يمكن أن يكون رائعا بديل ل Reveal.js, خاصة إذا كنت معتادًا بالفعل على Vue.js.

Grape.js

GrapeJS هو منشئ مواقع ويب مفتوح المصدر يسمح لك بإنشاء صفحات الويب ببساطة عن طريق سحب وإسقاط المكونات. يوفر بعض المكونات الشائعة مثل النص ، الصورة ، مقاطع الفيديو ، الأعمدة ، الخريطة ، اقتباس ، إلخ. يمكنك تصديره إلى HTML و CSS والإخراج أنيق بشكل مثير للدهشة ، على عكس بعض الأدوات المشابهة التي جربتها من قبل. تحقق من التجريبي.

بايخ

Vapid عبارة عن CMS جديد تم إنشاؤه باستخدام Node.js بنهج مثير للاهتمام وفريد ​​من نوعه. ستحتاج معظم CMS ، بافتراض أنك تريد تضمين نوع جديد من البيانات ، إلى تحديد المدخلات المخصصة أولاً في منطقة Dashboard / Admin.

مع Vapid ، يكون عكس ذلك حيث يمكنك تحديد القالب ، وسيقوم Vapid تلقائيًا بإنشاء الإدخال في منطقة Dashboard / Admin. إنها متوفرة كحزمة NPM.

WP CLI الإخطار

اسم يقول كل شيء. إنها حزمة WP-CLI مخصصة لعرض إشعارات نظام التشغيل عند تنفيذ WP-CLI بالفعل. يتوهم تماما.

CSSGr.id

تطبيق قائم على الويب لتكوين CSS Grid. يمكنك تكوين عدد العناصر والأعمدة والفجوة بين كل عنصر بالإضافة إلى امتداد كل عنصر ثم إنشاء كود HTML و CSS. CSS Grid هي واحدة من مواصفات CSS التي ليس من السهل فهمها. لكن هذه الأداة تجعل التعامل معها أسهل بكثير.

التمرير تلميح

ScrollHint هي مكتبة JavaScript تتيح لك إنشاء عنصر في الجزء العلوي لإظهار أن قسمًا على صفحة الويب الخاصة بك قابل للتمرير. يعد هذا مفيدًا بشكل خاص إذا كان لديك عنصر التمرير الأفقي في صفحة الويب الخاصة بك لأن معظم الناس لا ينتقلون بشكل طبيعي من اليسار إلى اليمين (أو العكس) عند استهلاك الويب.

PristineJS

مكتبة JavaScript لإضافة التحقق من الصحة إلى إدخال. HTML5 يأتي مع بعض التحقق من صحة نوع بالفعل مع “نوع = البريد الإلكتروني”, و “نوع = عدد” فمثلا. ولكن اذا كنت بحاجة الى أداة التحقق المخصصة التي لم يتم تنفيذها في HTML5, مكتبة جافا سكريبت هذه ستكون مفيدة.

SelectionJS

ربما يكون معظم الأشخاص على دراية بالفعل بكيفية تحديد مجلدات أو ملفات متعددة في أجهزة الكمبيوتر الخاصة بهم ؛ سيقومون عادةً بالضغط على الماوس وسحبها حول الملفات أو المجلدات التي يرغبون في تحديدها. إذا كنت ترغب في تطبيق نفس UX على موقع الويب الخاص بك ، فستكون أداة SelectionJS في متناول يديك.

Webdash

Webdash هي أداة يمكنها ذلك عرض مشروعك في واجهة المستخدم الرسومية. يربط من خلال package.json ملف في جهاز الكمبيوتر الخاص بك. لذلك يمكن عرض قائمة حزم NPM ، تحديث الحزمة ، البرامج النصية المسجلة ، تشغيل البرنامج النصي, ومعاينة ملفات README مباشرة من Webdash. جميل جدا!

CanJS

إطار جافا سكريبت لبناء واجهة الويب. يشبه React.js مع بعض الميزات الإضافية ويأتي مع يعمل جهاز التوجيه و DOM Utilities و AJAX مباشرة خارج الصندوق. كما أن لديها دعم مجتمع نشط للغاية يوفر بعض الامتدادات.

CheerioJS

مكتبة JavaScript تقوم بتنفيذ مواصفات jQuery Core لـ DOM (طراز كائن المستند) وهي مصممة ليتم استخدامها من جانب الخادم. إذا كنت العمل مع Node.js أثناء الاستمتاع أيضًا بصيغة jQuery مثل addClass (), ATTR (), و تجد(), هذا هو جافا سكريبت الذي تبحث عنه.

علبة الالوان

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

خصائص مكتوبة في PHP 7.4

PHP7.3 قاب قوسين أو أدنى ، كما ذكرنا في الدفعة السابقة. لكن PHP7.4 هو بالفعل على الخطة. واحدة من الخطط هي "الممتلكات المكتوبة". هذا يعني أنك سوف تكون قادرة قريبا على اكتب شيئا مثل معرف العام $ id؛ في صف PHP الخاص بك. إنه تغيير كبير يمكن أن يساعد بشكل كبير في تقليل أخطاء تطبيق PHP.

مرسام

برنامج مترجم JavaScript يجعل من السهل إنشاء Web Components بأحدث المعايير. علاوة على ذلك ، يضيف StencilJS أيضًا بعض أساليب تطوير الويب الحديثة في المزيج بما في ذلك دعم JSX ، التفاعل ، الموجه ، وإدارة الدولة باستخدام البرنامج المساعد.

فيو لا حصر له تحميل

ملحق Vue لإنشاء صفحة تمرير لانهائية. انها صديقة للجوال و متوافق مع أي عنصر للتمرير. كما يدعم اتجاهين للتمرير ، والأفضل من ذلك كله ، أنه يوفر الكثير من الوقت.

الحافظة الخامس

ملحق Vue.js مخصص يجعله كذلك من السهل إنشاء “نسخ” زر. يمكنك ببساطة إضافة الخامس الحافظة السمة إلى زر وكنت كل مجموعة. يعمل امتداد Vue.js هذا على كل متصفح حديث بالإضافة إلى IE11 والأحدث.

اختيار فيو

مكون Vue.js يوفر وظائف مماثلة لـ Select2. وهي مصممة ل Vue.js أنه يسمح أن يكون متوافق مع Vuex ، مخصص Templating, وحفنة من الخير Vue.js أخرى.