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

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

في هذه الدفعة ، سيكون نصف قائمتنا حول هذه الإعلانات. لذا كن مستعدًا لقول مرحباً بالمستقبل!

تحسين الصورة الأساسية

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

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

PHP 7.2

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

في PHP 7.2 ، هناك وظيفتان سيتم إهمالهما وهما create_function () و __autoload (). إذا كنت مطور ويب, مراجعة الكود وإجراء التغييرات اللازمة. لقد رأيت العديد من ملحقات WordPress التي لا تزال تستخدم هاتين الوظيفتين.

Web Share API

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

واجهة برمجة التطبيقات هذه متاحة حاليًا فقط في Google Chrome لسطح المكتب و Android. تحقق من هذا الفيديو يوتيوب لرؤيتها في العمل.

صورة المتزامن السمة

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

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

تقوم Mozilla بدفع التحديثات بقوة إلى Firefox مع بعض التحسينات ، تحمل الكود “الكم المشروع”. ويشمل الكم CSS - محرك جديد ل تقديم CSS سريع للغاية ، واجهة مستخدم جديدة ، و DevTools جديد.

الإصدار هو الحصول على الجر في مطوري الويب وقام البعض بالفعل بتحويل متصفحهم الرئيسي إلى Firefox. يوجد المزيد في هذا المشروع بما في ذلك Quantum DOM و WebRender. هل سنرى منافس Node.js استنادًا إلى محرك Firefox Quantum؟ حسنا ، ربما نعم.

MS Edge لنظام التشغيل iOS و Android

مايكروسوفت أعلنت للتو قم بإصدار أحدث متصفح ، Edge ، إلى iOS و Android. هذا يعني أن هناك متصفحًا إضافيًا لمواقع الويب الخاصة بك لاختباره.

غوتنبرغ

يعمل WordPress حاليًا على مشروع طموح ، يُسمى رمز Gutenberg. غوتنبرغ هو شد وجه إلى محرر ووردبريس بنيت بالكامل تقريبا مع جافا سكريبت.

عند هذه النقطة ، غوتنبرغ هو بنيت مع رد الفعل لكن المشروع يدرس إطارًا آخر مثل Preact أو Vue أو أي شيء آخر. إنه وضع معقد الآن. لذلك ، لمطوري WordPress بناء السمات والإضافات ، ابقوا عينيك على المشروع كما سوف يغير الطريقة التي نبني بها ووردبريس للأبد.

FoitFout

FoitFout هي أداة مفيدة لمقارنة نهجين مختلفين باسم FOIT و FOUT تحميل خطوط مخصصة على شبكة الإنترنت. باستخدام هذه الأداة ، يمكنك محاكاة الأسلوبين وتحديد الطريقة الأنسب لموقعك.

Vuera

فويرا هو مكتبة JavaScript التي تسمح لك باستخدام Vue و React معًا. يمكنك تضمين مكون Vue من .النظرية أو استخدم مكون React في Vue. فريقك يمكن أن يكون الآن أكثر إنتاجية مع أي إطار أنهم يفضلون استخدامها.

قابل للسحب

“قابل للسحب” هي مكتبة رائعة من شوبيفي. أنها بنيت على أعلى المتصفح الأصلي Drag-n-Drop API ويتيح لك واجهة برمجة تطبيقات شاملة للعمل معها. في حالة عدم توفر شيء تحتاجه ، يمكنك كتابة وحدة مخصصة لتوسيع وظائفها. تحقق من العرض التوضيحي لمعرفة كيف يعمل.

FlowchartJS

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

QuickBill

وخفيفة الوزن و تطبيق ويب مباشر لإنشاء فاتورة. يستخدم تقنيات المستعرض الأصلي وواجهات برمجة التطبيقات (APIs) للتشغيل حتى لا يكون هناك حاجة إلى حساب. ما عليك سوى الانتقال إلى موقع الويب وإضافة العناصر إلى الفاتورة وإنشاء ملف PDF. هذا هو!

Mocka

موكا هو عنصر نائب للمحتوى يمكنك استخدامه لموقع ويب النماذج الأولية. انها فقط 500 بايت وقابلة للتخصيص بالكامل. يمكنك تضمينه بسهولة في ملف CSS للمشروع الخاص بك باستخدام mixer Sass.

ال يوفر CSS عددًا من الفصول بما فيها mocka وسائل الإعلام لإنشاء عنصر نائب للصورة, mocka-عنوان لإنشاء عنوان ، و mocka النص لإنشاء نص التعسفي.

VueStar

VueStar هو مكون Vue لإضافة تأثير متلألئ عند النقر على أيقونة, على غرار ما يفعله تويتر مع “قلب” أيقونة في تطبيقات المحمول الخاصة بهم. يقدم المكون عنصرًا جديدًا اسمه النظرية نجوم حيث يمكنك إضافته في عصر الويب. وانت انتهيت!

ملعب الشبكة

تقدم CSS Grid مفهومًا جديدًا على الويب لإنشاء تخطيط وهو نوع من التعقيد للوهلة الأولى نظرًا للعديد من الخصائص الجديدة التي يتميز بها.

GridPlayground هي في الأساس مبادرة Mozilla لتعليم CSS Grid ودفع اعتماد CSS Grid إلى الأمام. حتى Firefox يجلب أداة جديدة إلى DevTools لفحص تصميم الشبكة.

مدير المقتطف

“مدير المقتطف” هو بسيط التطبيق لتخزين وإدارة مقتطفات الكود. يمكنك إنشاء عنصر جديد ولصق الرمز وتعيين النقطة. في هذه المرحلة ، لا يوجد شيء باهت للغاية ويوفر فقط شفرة المصدر التي ستحتاج إلى تجميعها باستخدام NPM.

كلفه واجهة

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

SwissInCSS

تعرض SwissInCSS العديد من تصميمات الملصقات السويسرية الكلاسيكية باستخدام CSS. شفرة المصدر متاحة في CodePen.