موارد جديدة لمصممي ومطوري الويب (يونيو 2015)
هل تصدق أن هذه السلسلة ظلت تعمل منذ 3 سنوات تقريبًا؟ في هذا الوقت القصير ، قدمنا ما لا يقل عن 30 قائمة من أحدث الموارد لمصممي ومطوري الويب. وسوف نستمر في هذا الأمر مع مجموعة جديدة لشهر يونيو.
في هذه المجموعة ، سننظر في عدد قليل من مكتبات جافا سكريبت لعرض المتزلجون ، والتمرير أكثر سلاسة لجداول البيانات ، وتأثير مصعد بارد لزر التمرير إلى أعلى ، وأكثر من ذلك.
دعونا التحقق منها.
تأكيد النمط المتوسط
وقد تم مدح المتوسطة لتصميمها. يبدو أن التصميم وواجهة المستخدم قد تم التفكير فيهما بدقة. علاوة على ذلك ، فإنها تلهم مطوري الويب أيضًا بتطوير مكتبات JavaScript أو CSS لتكرار واجهة المستخدم. تأكيد النمط المتوسط هو مكتبة JavaScript واحدة تشبه النافذة المنبثقة أو مربع الحوار متوسط.
البطريق طائر
Penguin هو إطار أمامي جديد يمكنك استخدامه كأساس لمواقع الويب الخاصة بك. باستخدام أدوات مثل Grunt و Sass ، يمكنك بسهولة إضافة أو إزالة مكتبات أو CSS لا تحتاجها خارج الإطار مما يجعلها خفيفة الوزن قدر الإمكان. إنها أيضًا بديل جيد لـ Bootstrap و Foundation.
Elevator.js
هل شاهدت هذا الزر في موقع ويب يتيح لك التمرير لأعلى الصفحة؟ تنقلك معظم الأزرار إلى الأعلى ، ولكن مع Elevator.js ، تحصل على تأثير تسارع انزلاقي مماثل للمصعد والموسيقى و “دينغ!” صوت بمجرد وصولك إلى الطابق العلوي. حقا لطيف!
X-إينستاجرام
X-Instagram هو عنصر بوليمر مخصص يسحب ويظهر الصور من Instagram حسب العلامة. هذا العنصر يجعل العملية برمتها أسهل بكثير. نحن ببساطة نضيف العنصر تمامًا مثل عنصر HTML العادي ونحدد الكلمة الأساسية للعلامة كسمات للعنصر.
ودع السحر يبدأ!
CamanJS
CamanJS هي مكتبة جافا سكريبت كبيرة لمعالجة الصور. لأنه يأتي مع مجموعة ميزات تجدها عادة في محرر الصور. يمكنك تحويل الصورة ضبابية ، بالأبيض والأسود ، وحتى زيادة التباين.
ClusterizeJS
Clusterize.js هي مكتبة JavaScript التي ستزيد من الأداء عند التعامل مع الكثير من البيانات في الجداول. بينما تقوم بالتمرير لأسفل على طاولة بها ، على سبيل المثال ، 5000 في القائمة ، عادةً ما تتحول التجربة إلى laggy and jerky. ستقوم مكتبات JavaScript هذه بمعالجة هذه المشكلة ، مما يجعل إجراء التمرير سلسًا تمامًا.
الجلوس في الاختبار
الجلوس في الاختبار هي مجموعة من الأسئلة لتقييم مهارتك ومعرفتك على CSS3 و HTML5 و JavaScript. يتم إعطاء كل اختبار عددًا من الأسئلة ووقتًا محدودًا لاستكمال كل هذه الأسئلة. إنه مصدر جيد لمعرفة مدى جودتنا بالفعل مع هذه اللغات.
سهام HTML
هذه مجموعة من رموز Unicode الأصلية الخاصة التي يمكنك تضمينها في HTML و CSS. تتضمن هذه الأحرف الأسهم والعملة وعلامات الترقيم. ستجد أنه ، في بعض الأحيان ، لا تحتاج إلى رمز الخط لعرض هذه الأحرف.
Flickity
Flickity هي مكتبة جافا سكريبت لعرض الدوافع ، وصالات العرض ، أو المتزلجون على موقع الويب الخاص بك. هو الأمثل لشاشة تعمل باللمس. يمكنك تحريك الدوارات بدون أي جهد أو إصبع أو لوحة التعقب إذا كنت تستخدم الكمبيوتر المحمول. كما يأتي مع مجموعة من الخيارات التي تتيح التخصيص الكامل بأي طريقة تريدها.
Typeslab
Typeslab هي أداة مفيدة لإنشاء ملصق من نوع Slab. ببساطة كتابة المحتوى واختيار الخط ، سوف تولد Typeslab ملصق على الفور. يمكنك بعد ذلك تنزيله أو نشره في Imgur.
MatchMedia
Matchmedia هي مكتبة تقوم بتكرار استعلامات وسائط CSS. المكتبة ليست جديدة بالفعل ، لكنها مكتبة مفيدة حقًا قررت أن أضعها في القائمة. إذا كنت بحاجة إلى إجراء البرمجة النصية بناءً على حجم منفذ عرض المستخدم أو نوع الوسائط ، فهذه هي المكتبة التي تريدها.
التالي مثال يستخدم لتشغيل البرنامج النصي في 320px وتحت حجم viewport:
إذا (matchMedia ('الشاشة فقط و (الحد الأقصى للعرض: 320 بكسل)'). التطابقات 
ساس برجر
ساس برجر يأتي مع مزيج يتيح لك إنشاء “هامبورجر” أيقونة وتحويلها إلى علامة الصليب مع مشاحنات أقل.
ماركس
Marx عبارة عن مجموعة من قواعد أنماط CSS لجعل أنماط العناصر أكثر تناسقًا. إنه قابل للتخصيص (مع Sass) ، خفيف الوزن ، ويعمل خارج الصندوق. بديل جيد لأدوات إعادة تعيين CSS الشائعة بالفعل مثل Normalize.css.
CSS.js
CSS.js يستخدم لتحليل ملفات CSS لإعلان النمط. تم استخدام المكتبة في البداية لفريق Jotform لبناء تجربة WYSIWYG لتحرير النماذج باستخدام CSS. الآن لديهم مصادر مفتوحة حتى نستخدمها جميعًا. يستحق الادخار ، فقط في حالة الحاجة إليها في وقت لاحق.
